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随 着 我 国 改革 开放 的 进一步 深化 ,高 等 教育 也 得 到 了 快速 发 展 ,各 地 高 校 紧 密 结合 地 方 
经 济 建设 发 展 需要 ,科学 运用 市 场 调节 机 制 ,加 大 了 使 用 信息 科学 等 现代 科学 技术 提升 \ 改 
造 传统 学 科 专业 的 投入 力度 ,通过 教育 改革 合理 调整 和 配置 了 教育 资源 ,优化 了 传统 学 科 专 
业 , 积 极为 地 方 经 济 建设 输送 人 才 ,为 我 国 经 济 社会 的 快速 、 健 康 和 可 持续 发 展 以 及 高 等 教 
育 自身 的 改革 发 展 做 出 了 巨大 贡献 。 但 是 ,高 等 教育 质量 还 需要 进一步 提高 以 适应 经 济 社 
会 发 展 的 需要 ,不 少 高 校 的 专业 设置 和 结构 不 尽 合理 ,教师 队伍 整体 素质 蝇 待 提高 ,人 才 培 
养 模 式 ,教学 内 容 和 方法 需要 进一步 转变 ,学 生 的 实践 能 力 和 创新 精神 亚 待 加 强 。 

教育 部 一 直 十 分 重视 高 等 教育 质量 工作 。2007 年 1 月 ,教育 部 下 发 了 《关于 实施 高 等 
学 校本 科教 学 质量 与 教学 改革 工程 的 意见 》, 计 划 实 施 “ 高 等 学 校本 科教 学 质量 与 教学 改革 
工程 (简称 “质量 工程 ')”, 通 过 专业 结构 调整 ,课程 教材 建设 、 实 践 教学 改革 、 教 学 团队 建设 
等 多 项 内 容 ,进一步 深化 高 等 学 校 教 学 改革 ,提高 人 才 培养 的 能 力 和 水 平 , 更 好 地 满足 经 济 
社会 发 展 对 高 素质 人 才 的 需要 。 在 贯彻 和 落实 教育 部 "质量 工程 ”的 过 程 中 ,各 地 高 校 发 挥 
师资 力量 强 、 办 学 经 验 丰富 ,教学 资源 充裕 等 优势 ,对 其 特色 专业 及 特色 课程 ( 群 ) 加 以 规划 、 
整理 和 总 结 ,更 新 教学 内 容 改革 课程 体系 ,建设 了 一 大 批 内 容 新 .体系 新 ,方法 新 .手段 新 的 
特色 课程 。 在 此 基础 上 ,经 教育 部 相关 教学 指导 委员 会 专家 的 指导 和 建议 ,清华 大 学 出 版 社 
在 多 个 领域 精 选 各 高 校 的 特色 课程 ,分 别 规划 出 版 系列 教材 ,以 配合 “质量 工程 ”的 实施 , 满 
足 各 高 校 教学 质量 和 教学 改革 的 需要 。 

本 系列 教材 立足 于 计算 机 专业 课程 领域 ,以 专业 基础 课 为 主 、 专 业 课 为 辅 ,横向 满足 高 
校 多 层次 教学 的 需要 。 在 规划 过 程 中 体现 了 如 下 一 些 基本 原则 和 特点 。 

(1) 反映 计算 机 学 科 的 最 新 发 展 ,总 结 近年 来 计算 机 专业 教学 的 最 新 成 果 。 内 容 先进 ， 
充分 吸收 国外 先进 成 果 和 理念 。 

(2) 反映 教学 需要 ,促进 教学 发 展 。 教 材 要 适应 多 样 化 的 教学 需要 ,正确 把 握 教学 内 容 
和 课程 体系 的 改革 方向 ,融合 先进 的 教学 思想 、 方 法 和 手段 ,体现 科学 性 、 先 进 性 和 系统 性 ， 
强调 对 学 生 实践 能 力 的 培养 ,为 学 生 知识 、 能 力 、 素 质 协调 发 展 创造 条 件 。 

(3) 实施 精品 战略 ,突出 重点 ,保证 质量 。 规 划 教 材 把 重点 放 在 公共 基础 课 和 专业 基础 
课 的 教材 建设 上 ; 特别 注意 选择 并 安排 一 部 分 原来 基础 比较 好 的 优秀 教材 或 讲义 修订 再 
版 ,逐步 形成 精品 教材 ; 提倡 并 鼓励 编写 体现 教学 质量 和 教学 改革 成 果 的 教材 。 

(4) 主张 一 纲 多 本 ,合理 配套 。 专 业 基础 课 和 专业 课 教 材 配 套 , 同 一 门 课程 有 针对 不 同 
层次 、 面 向 不 同 应 用 的 多 本 具有 各 自 内 容 特点 的 教材 。 处 理 好 教材 统一 性 与 多 样 化 ,基本 教 
材 与 辅助 教材 .教学 参考 书 , 文 字 教 材 与 软件 教材 的 关系 ,实现 教材 系列 资源 配套 。 

(5) 依靠 专家 ,择优 选用 。 在 制定 教材 规划 时 要 依靠 各 课程 专家 在 调查 研究 本 课程 教 
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材 建设 现状 的 基础 上 提出 规划 选 题 。 在 落实 主编 人 选 时 ,要 引入 竞争 机 制 ,通过 申报 、 评 审 
确定 主题 。 书 稿 完成 后 要 认真 实行 审 稿 程序 ,确保 出 书 质量 。 

繁荣 教材 出 版 事业 ,提高 教材 质量 的 关键 是 教师 。 建 立 一 支 高 水 平 教材 编写 梯队 才能 
保证 教材 的 编写 质量 和 建设 力度 ,希望 有志 于 教材 建设 的 教师 能 够 加 入 到 我 们 的 编写 队伍 
中 来 。 


21 世纪 高 等 学 校 计算 机 专业 实用 规划 教材 
联系 人 : 魏 江 江 weijj@tup. tsinghua. edu. cn 





随 着 互联 网 进入 移动 互联 时 代 , 以 往 的 HTMLA 标准 已 不 再 能 够 适应 现实 的 需求 , 且 
DUE HTMLA 并 不 能 构建 现实 中 越 来 越 复杂 的 Web 应 用 ,由 此 大 量 的 插件 随 之 而 来 。 为 了 
扭转 这 一 局 面 ,HTML5 应 运 而 生 。 可 以 说 ,这 是 Web 应 用 标准 的 一 次 新 的 统一 ,得 到 了 各 
个 主流 浏览 器 前 所 未 有 的 支持 。HTML5 这 一 被 W3C 标准 化 组 织 不 断 维 护 的 标准 ,还 在 实 
验 着 一 些 新 的 技术 ,并 且 这 些 前 沿 的 技术 也 在 逐步 得 到 各 个 浏览 器 厂商 的 支持 。 

HTML5 的 问世 为 Web 应 用 的 开发 者 和 使 用 者 提供 了 很 多 便利 , Web 应 用 不 必 再 试图 
通过 捅 件 来 实现 各 种 基本 的 功能 。 在 HTML5 的 框架 下 ,就 可 进行 多 媒体 的 添加 .HTML 
元 素 的 拖 放 ,二 维 图 像 的 绘制 .地 理 位 置 的 查询 等 操作 ,各 种 HTML5 的 新 特性 很 好 地 满足 
了 目前 Web 应 用 中 对 媒体 、 视 觉 效 果 等 提出 的 更 高 要 求 。 最 为 可 贵 的 是 , 自 HTML5 标准 
问世 后 , 它 便 受到 了 各 个 浏览 器 厂商 的 鼎力 支持 ,Web 应 用 的 标准 得 到 了 更 好 的 维护 ,相信 
这 样 的 标准 可 以 让 HTML5 比 它 的 前 辈 更 加 与 时 俱 进 ,不 断 进 行 自 我 更 新 ,以 应 对 现实 应 
用 中 越 来 越 困 难 的 新 挑战 。 

本 书 主要 针对 Web 应 用 开发 的 初学 者 ,以 及 对 Web 应 用 开发 感 兴趣 的 人 士 , 旨 在 为 读 
者 提供 HTML5 基础 的 教程 ,使 读者 对 HTML5 的 相关 特性 以 及 Web 应 用 的 开发 有 一 个 
基本 的 认识 。 

全 书 分 13 章 ,分 别 介绍 HTML5 标准 中 的 不 同 特 性 ,其 中 包含 大 量 的 实例 以 及 实例 在 
浏览 器 中 的 运行 效果 展示 ,另外 还 有 相关 的 课 后 习题 ,来 帮助 读者 更 好 地 理解 并 应 用 
HTML5 的 相关 知识 ,为 读者 今后 进行 Web 应 用 的 开发 做 铺垫 。 同 时 ,为 了 让 读者 更 方便 
地 进行 HTMLS 代码 编写 与 测试 ,本 书 还 提供 了 浏览 器 .代码 编辑 器 .浏览 器 调试 工具 和 服 
务 器 环境 相关 的 教学 视频 , 供 读 者 参考 学 习 。 

本 书 的 作者 为 吕 云 翔 . 刘 猛 猛 , 曾 洪 立 、 吕 彼 佳 , 姜 彦 华 参与 了 部 分 内 容 的 编写 并 进行 了 
素材 整理 及 配套 资源 制作 等 。 

由 于 HTML5 的 标准 本 身 还 在 不 断 更 新 和 发 展 ,其 中 的 一 些 内 容 可 能 会 随 着 时 间 的 推 
移 而 出 现 变 化 ,加 之 我 们 的 水 平和 能 力 有 限 ,本 书 难免 有 玻 漏 之 处 ,县 请 各 位 同仁 和 广大 读 
者 给 予 批评 指正 ,也 希望 各 位 能 就 实践 过 程 中 的 经 验 和 心得 与 我 们 交流 (yunxianglu@ 


hotmail. com) 。 





mox 
2018 年 5 月 
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第 12 HTML5 





HTML5 是 HTML 最 新 的 修订 版 本 ,2014 年 10 月 由 万 维 网 联盟 (W3C) 完 成 标准 制 
定 ,目标 是 取代 1999 年 所 制定 的 HTML 4.01 和 XHTML 1.0 标准 ,以 期 能 在 互联 网 应 用 
迅速 发 展 的 时 候 , 使 网 络 标准 与 当代 的 网 络 需求 相 匹 配 。 

由 于 广义 的 HTML5 包含 的 不 仅仅 是 HTML 文档 ,还 包含 与 其 相关 的 CSS 风格 样式 
以 及 JavaScript 脚本 语言 ,为 了 更 好 地 理解 HTML5, Web 相关 的 基础 知识 可 以 说 是 不 可 或 
缺 的 。 所 以 ,为 了 便于 读者 开展 HTML5 的 学 习 , 本 章 在 介绍 HTML5 概况 的 基础 上 ,还 准 
备 了 Web, 浏览 器 .HTML CSS 和 JavaScript 等 其 他 基础 知识 以 供 参 考 ,并且 针对 其 中 的 
浏览 器 .代码 编辑 器 、 使 用 浏览 器 调试 ,服务 器 环境 4 部 分 准备 了 相应 的 教学 视频 ,请 读者 根 
据 自 己 的 需要 选择 性 阅读 本 章 内 容 。 


1.1 HTMLS 


1.1.1 HTMLS 的 发 展 历程 


HTML5 的 上 一 代 HTML 标准 是 制定 于 1999 年 的 HTML4, 当 时 互联 网 刚刚 发 展 没 
多 久 , 受 制 于 网 络 硬件 条 件 的 限制 ,网 页 形式 极其 简单 ,以 静态 展示 内 容 为 主 ,并 无 今天 习 以 
为 常 的 视频 和 音频 。 随 着 时 间 的 发 展 ,网 络 的 速度 增长 了 不 知 多 少 倍 , 新 兴 的 网 页 不 再 局 限 
于 简单 的 文本 与 图 片 展示 ,而 是 加 入 了 更 多 的 多 媒体 元 素 以 及 更 多 的 交互 ,显然 ,十 多 年 前 
的 标准 ,已 不 能 适应 如 今 的 现实 需求 。 

最 开始 更 为 复杂 的 网 页 应 用 需求 的 解决 方案 来 自 浏览 器 之 外 的 第 三 方 插件 ,许多 人 所 
熟知 的 Flash 就 是 插件 的 一 种 。 第 三 方 插件 在 某 种 程度 上 确实 使 用 户 获 得 了 更 为 卓越 的 体 
验 ,然而 ,依赖 第 三 方 的 Web 应 用 却 让 开发 者 与 使 用 者 有 诸多 的 不 便 。 开 发 者 很 难 将 自己 
的 应 用 一 致 地 在 各 个 浏览 器 上 实现 ,同时 还 要 根据 需要 去 学 习 并 掌握 第 三 方 机 构 所 拥有 的 
技术 标准 。 而 用 户 则 不 得 不 在 浏览 器 的 基础 上 额外 地 安装 插件 来 运行 相关 Web 应 用 ,对 于 
使 用 PC 的 访问 者 来 说 ,安装 和 使 用 插件 的 阻碍 尚 小 ,而 对 于 移动 设备 的 使 用 者 而 言 ,这 意 
味 着 需 消耗 更 多 的 电量 。 插 件 使 用 的 矛盾 在 iPhone 宣布 不 支持 Flash 后 显得 尤为 突出 ,这 
时 人 们 发 现 ,无 论 对 于 开发 者 还 是 使 用 者 ,需要 的 是 一 个 开源 的 技术 标准 由 大 家 一 起 来 维 
护 , 而 不 是 依赖 某 一 家 或 是 某 一 插件 所 支持 的 标准 。 于 是 HTML5 的 标准 化 工作 由 2008 
年 开始 启动 ,以 更 好 地 支持 流 媒 体 展示 和 更 丰富 的 互动 ,以 及 更 好 地 适应 移动 端 设备 为 设计 
初衷 ,并 于 2014 4E 10 月 完成 标准 制定 ,并 一 直 处 于 活跃 状态 ,由 万 维 网 联盟 (W3C) 来 维护 ， 
不 断 地 更 新 和 完善 。 
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1.1.2 浏览 器 支持 


一 般 来 说 ,HTML5 应 该 算是 浏览 器 行业 前 所 未 有 的 一 次 标准 化 统一 进程 ,得 到 了 市 场 
上 主流 浏览 器 的 大 力 支持 。 所 以 , 目前 主流 的 FireFox, Chrome, Opera, Safari, IE 和 
Microsoft Edge 几 大 浏览 器 的 较 新 版 本 都 对 HTML5 标准 有 了 一 定 的 支持 。 然 而 ,这 几 款 
主流 浏览 器 对 于 HTMLS 标准 的 支持 程度 却 有 所 不 同 ,就 目前 的 情况 来 看 , FireFox 和 
Chrome 两 款 浏 览 器 是 HTML5 标准 化 最 大 的 倡导 者 ,它们 支持 几乎 全 部 的 HTML5 技术 
以 及 其 他 新 鲜 面 世 的 技术 ,Safari 紧 随 其 后 ,而 下 浏览 器 对 HTML5 标准 的 支持 则 相对 不 足 。 

为 了 更 好 地 开展 本 书 的 学 习 , 本 书 推荐 的 浏览 器 环境 为 Chrome 浏览 器 。 书 中 的 实例 
展示 效果 均 在 Chrome 浏览 器 中 运行 和 调试 ,读者 也 可 以 下 载 其 他 浏览 器 作为 运行 环境 。 
在 版 本 选择 上 ,以 较 新 的 浏览 器 版 本 为 宜 。 


1.1.3 兼容 性 考量 


尽管 许多 浏览 器 都 对 HTML5 标准 有 了 一 定 的 支持 ,但 需要 注意 的 是 ,在 实际 开发 过 
程 中 ,开发 者 需要 根据 应 用 所 面向 的 用 户 群 来 测试 所 开发 应 用 对 不 同 浏览 器 ,甚至 是 不 同 版 
本 浏览 器 的 兼容 性 。 因 为 ,并 不 是 所 有 的 用 户 都 使 用 了 最 新 的 支持 了 HTMLS 的 浏览 器 ， 
还 有 许多 用 户 使 用 的 是 较 老 版 本 的 TE 浏览 器 。 如 果 我 们 所 开发 的 应 用 面向 的 客户 是 相对 
小 众 的 年 轻 人 ,那么 可 以 自由 地 使 用 HTML5 所 支持 的 特性 ,甚至 是 最 新 的 技术 。 然 而 如 
果 我 们 所 开发 的 应 用 追求 的 是 良好 的 可 用 性 ,比如 说 是 缴费 系统 ,那么 我 们 的 应 用 必须 对 各 
个 浏览 器 ,甚至 是 不 同 版 本 的 浏览 器 有 较 好 的 兼容 性 。 因 为 这 时 应 用 的 重点 不 在 于 提供 多 
么 炫 酷 的 体验 ,而 是 更 为 广泛 的 可 用 性 。 

在 本 书 中 ,为 了 尽 可 能 简洁 ,在 很 多 情况 下 ,我 们 并 不 会 将 各 个 浏览 器 对 某 个 HTML5 
特性 的 最 低 支 持 版 本 一 一 列 出 。 在 此 推荐 一 个 十 分 方便 的 浏览 器 兼容 性 信息 网 站 -一 
www. caniuse. com, WA] 1. 1 所 示 ,在 这 里 只 需 输 入 自己 想 要 查询 的 HTMLS 相关 技术 , 即 
可 知晓 各 个 浏览 器 对 这 个 技术 的 支持 情况 。 
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图 1.1 caniuse 网 站 


1.1.4 HTMLS 新 将 性 


HTML5 相 比 之 前 的 标准 是 令 人 期 待 已 久 的 大 一 统 , 也 是 对 Web 应 用 中 泛滥 的 各 种 插 
件 的 一 次 反击 。 它 支持 了 许多 新 特性 。 本 书 将 对 HTML5 的 一 些 重要 特性 分 章节 进行 介 
绍 , 相 信 许 多 读者 在 目录 中 已 经 读 到 了 ,但 是 HTML5 毕竟 是 一 个 “ 活 ” 的 标准 , 它 还 在 不 断 
地 更 新 ,因为 篇 幅 所 限 ,本 书 不 能 面面俱到 地 介绍 。 下 面 是 本 书 所 涉及 的 一 些 HTMLS € 
要 新 特性 。 

。 新 表单 元 素 。 

。 语义 化 标签 。 

。 音频 和 视频 。 

Canvas 画布 。 

。 地 理 定 位 。 

* Web Worker, 

。 拖 放 。 

。 数据 存储 。 

。 文件 API。 

。 通信 相关 API。 

。 本 地 缓存 Service Worker, 

除 此 之 外 ,HTML5 还 定义 了 其 他 的 一 些 特性 ,例如 CameraAPI 用 户 计算 机 摄像 头 的 
访问 .WebRTC 即时 视频 通信 、WebGL 三 维 图 形 绘制 .SVG 二 维 矢量 图 绘制 等 。 请 读者 根 
据 开 发 中 的 实际 需要 对 相关 技术 进行 学 习 。 


1.2 Web 


1.2.1 Web 的 诞生 


1980 年 ,英国 科学 家 Tim Berners-Lee HEH + 伯 纳 斯 - 李 ) 在 欧洲 核子 物理 实验 室 
(European Particle Physics Laboratory. CERN) 工 作 时 建议 建立 一 个 以 超 文 本 系统 为 基础 
的 项 目 帮 助 来 自 世 界 各 地 的 科学 家 分 享 和 更 新 其 研究 结果 。 他 与 Robert Cailliau( 罗 
勃 . 卡 力 奥 ) 一 起 建立 了 一 个 叫做 ENQUIRE 的 原型 系统 。 

1984 年 , 伯 纳 斯 - 李 重 返 欧洲 核子 物理 实验 室 ,这 次 是 作为 正式 成 员 。 他 恢复 了 他 过 去 
的 工作 一 一 创造 了 万 维 网 。 为 此 他 编写 了 世界 上 第 一 个 网 页 浏览 器 (WorldWideWeb) 和 第 
一 个 网 页 服务 器 (httpd) 。 世 界 上 第 一 个 网 站 致力 于 万 维 网 (World Wide Web, WWW) 项 
目 本 身 ,并 且 搭 载 在 Berners-Lee 的 NeXT 工作 站 上 ,这 个 网 站 描述 了 Web 的 基本 特性 , 包 
括 如 何 去 访问 他 人 的 文档 ,以 及 如 何 建立 自己 的 Web 服务 器 。 这 人 台 传 奇 的 NeXT 工作 站 至 
今 仍 在 欧洲 核子 物理 实验 室 ,为 了 纪念 万 维 网 的 诞生 ,2013 年 这 个 世界 上 第 一 个 网 站 被 还 
原 到 当年 的 那个 最 初 的 地 址 。 今 天 我 们 仍 可 以 去 访问 这 个 地 址 ,回顾 这 一 切 是 从 哪里 开始 
的 。 网 址 为 http://info. cern. ch/hypertext/ WWW/TheProject. html。 世 界 上 第 一 个 网 站 
的 内 容 如 图 1.2 Bros o 
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图 1.2 世界 上 第 一 个 网 站 


1.2.2 Web 的 特点 


1. Web 拥有 易 导 航 的 和 图 形 化 的 界面 

Web 非常 流行 的 一 个 很 重要 的 原因 就 在 于 它 可 以 在 一 页 上 同时 显示 色彩 丰富 的 图 形 
和 文本 。 在 Web 之 前 Internet. 上 的 信息 只 有 文本 形式 。Web 可 以 提供 将 图 形 音频、 视频 
信息 集 于 一 体 的 特性 。 同 时 , Web 是 非常 易于 导航 的 ,只 需 从 一 个 链接 跳 到 另 一 个 链接 ,就 
可 以 在 各 页 各 站 点 之 间 进 行 浏览 。 

2. Web 与 平台 无 关 

无 论 你 的 计算 机 系统 平台 是 什么 ,你 都 可 以 通过 互联 网 访问 Web。 浏 览 Web 对 你 的 
系统 平台 没有 什么 限制 。 无 论 从 Windows F 6 UNIX 平台、Mac 平 台 还 是 其 他 平台 都 可 
以 访问 Web。 对 Web 的 访问 是 通过 浏览 器 (browser) 软 件 来 实现 的 。 免 去 了 开发 者 在 不 
同 平台 之 间 的 重复 工作 ,也 让 不 同 平台 的 用 户 能 够 正确 地 获取 同一 份 信息 ,浏览 同一 个 
网 页 。 

3. Web 是 分 布 式 的 

大 量 的 图 形 .音频 和 视频 信息 会 占用 相当 大 的 磁盘 空间 ,我 们 甚至 无 法 预知 信息 的 
多 少 。 对 于 Web 而 言 ,这 些 海量 的 信息 并 不 是 集中 存储 的 ,信息 被 分 布 式 地 存储 在 
Web 不 同 的 站 点 上 。 在 物理 上 说 , Web 上 的 一 个 个 网 站 ,被 搭载 到 了 成 千 上 万 的 服务 
器 上 。 这 些 服务 器 中 ,有 些 是 属于 同一 个 站 点 的 ,它们 可 能 会 被 集中 地 部 署 在 一 起 ,而 
分 属 不 同 站 点 的 服务 器 之 间 则 可 能 会 相隔 万 里 。 但 这 并 不 会 影响 Web 在 逻辑 上 的 统 
一 性 ,从 用 户 的 角度 ,只 需 在 浏览 器 中 指明 这 个 站 点 就 可 以 轻易 地 访问 到 物理 上 并 不 
一 定 一 起 的 站 点 的 信息 ,在 浏览 器 背后 的 W eb 仿佛 被 抽象 成 为 一 个 整体 , 它 就 是 这 些 
海量 的 信息 。 

4. Web 是 动态 的 

由 于 各 Web 站 点 的 信息 包含 站 点 本 身 的 信息 ,信息 的 提供 者 可 以 经 常 对 站 点 的 内 容 进 
行 更 新 。 如 某 个 协议 的 发 展 状况 .新鲜 的 资讯 等 。 一 般 各 信息 站 点 都 会 尽量 保证 信息 的 时 
间 性 ,以 获得 持续 的 访问 与 关注 。 所 以 说 , Web 站 点 上 的 信息 是 动态 的 .经常 更 新 的 ,这 一 





特性 由 信息 的 提供 者 保证 。 

5. Web 是 交互 的 

Web 的 交互 性 首先 表现 在 它 的 超级 链接 上 ,用 户 的 浏览 顺序 和 所 到 站 点 完全 由 用 户 自 
己 决定 。 另 外 ,用 户 也 可 以 从 服务 器 方 动态 地 获取 信息 ,通过 填写 表单 并 向 服务 器 提交 请 
求 ,服务 器 便 可 根据 用 户 的 请 求 返回 相应 信息 ,此 过 程 体现 了 Web 的 交互 性 。 


1.2.3 Web 的 工作 原理 


用 户 通过 客户 端 浏览 器 访问 Web 上 的 网 站 或 者 其 他 网 络 资源 时 ,通常 需要 在 客户 端的 
浏览 器 的 地 址 栏 中 输入 所 要 访问 网 站 的 统一 资源 定位 符 (Uniform Resource Locator， 
URL) ,或 者 通过 超级 链接 方式 链接 到 相关 网 页 或 网 络 资源 ,其 中 的 网 页 资源 主要 采用 
HTML(HyperText Markup Language) 编 写 ; 然后 通过 域名 服务 器 进行 全 球 域名 解析 ,并 
根据 解析 结果 确定 所 要 访问 的 IP 地 址 (IP address) 获 取 相应 的 网 络 资源 。 

获取 网 站 的 IP 地 址 后 ,客户 端的 浏览 器 向 指定 的 IP 地 址 上 的 Web 服务 器 发 送 一 个 
HTTP 请 求 (Hypertext Transfer Protocol, 超 文本 传输 协议 ); 通常 情况 下 , Web 服务 器 会 
很 快 响应 客户 端的 请 求 , 将 用 户 所 需要 的 HTML 文本 、 图 片 和 构成 网 页 的 其 他 一 切 文件 发 
送 回 用 户 。 如 果 需 要 访问 数据 库 中 的 数据 , Web 服务 器 会 将 控制 权 转 给 应 用 服务 器 ,根据 
Web 服务 器 的 数据 请 求 读 写 数据 库 , 并 进行 相关 数据 库 的 访问 操作 ,应 用 服务 器 将 数据 查 
询 响应 发 送 给 Web 服务 器 ,由 Web 服务 器 再 将 查询 结果 转发 给 客户 端的 浏览 器 ; 浏览 器 
再 把 客户 端 所 请 求 的 内 容 以 网 页 的 形式 显示 给 用 户 。 这 就 是 Web 的 工作 原理 ,如 图 1.3 
所 示 。 
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数据 库 服务 系统 














图 1.3 Web 的 工作 原理 


1.2.4 URL 


当 使 用 浏览 器 访问 Web 网 页 时 ,有 一 个 概念 是 无 论 如 何 也 无 法 绕 开 的 , 那 就 是 URL. 
也 就 是 平时 所 说 的 网 址 。URL 是 对 可 以 从 互联 网 上 得 到 的 资源 的 位 置 和 访问 方法 的 一 种 
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简洁 表示 ,是 互联 网 标准 资源 的 地 址 。 无 论 是 日 常 浏览 网 页 ,还 是 在 之 后 的 HTMLS 学 习 
中 ,我 们 都 需要 不 断 接触 到 URL, 下 面 以 世界 上 第 一 个 网 页 http://info. cern. ch/ 
hypertext/www/TheProject. html 为 例 , 来 说 明 URL 各 部 分 都 代表 了 什么 。 

首先 ,开头 的 http 代表 所 使 用 的 获取 资源 的 协议 ,该 URL 显示 获取 这 个 网 页 资源 所 要 
使 用 的 是 HTTP 协议 。 

然后 ,info. cern. ch 这 部 分 指明 了 资源 所 在 的 服务 器 , 它 是 一 个 域名 (domain name), 
域名 将 难以 理解 的 网 络 地 址 抽象 为 一 个 个 可 以 被 人 类 记忆 并 理解 的 英文 单词 组 合 ,以 便于 
使 用 和 访问 。 

之 后 的 /hypertext/ WWW/ 代 表 了 所 要 获取 资源 所 在 路 径 (path) , 即 一 个 网 页 所 在 服 
务 器 的 文件 路 径 , 这 部 分 的 原理 就 如 同 平时 使 用 的 计算 机 上 定位 文件 一 样 , 使 用 路 径 的 

最 后 的 TheProject. html 代表 所 要 获取 资源 的 文件 名 , 即 具体 的 HTML 文档 。 


1.3 浏 览 器 


相信 许多 读者 对 浏览 器 都 不 陌生 ,我 们 通过 它 来 访问 网 站 ,获取 自己 所 需 的 信息 。 可 以 
说 ,浏览 器 是 最 广为人知 且 重要 的 软件 产品 之 一 。 


1.3.1 浏览 器 功能 


具体 来 说 ,浏览 器 (browser) 是 Web 服务 的 客户 端 程序 ,可 对 从 服务 器 发 来 的 网 页 和 
各 种 多 媒体 数据 进行 解释 .显示 和 播放 , 亦 可 以 向 服务 器 提交 信息 实现 用 户 与 服务 器 之 
间 的 交互 。 浏 览 器 的 主要 功能 就 是 解析 网 页 HTML 文件 并 正确 显示 。 简 单 来 说 ,用 户 
使 用 浏览 器 的 目的 是 向 互联 网 请 求 资源 ,而 资源 被 部 署 在 全 球 各 地 的 数 不 尽 的 服务 器 
上 。 浏 览 器 所 做 的 工作 就 是 代表 用 户 向 特定 的 服务 器 请 求 所 需 资 源 , 然 后 服务 器 对 这 次 
请 求 进行 响应 , 即 返 回 相 应 资源 ,之 后 浏览 器 对 服务 器 所 返回 的 资源 进行 解析 ,最 终 呈现 
给 浏览 器 的 使 用 者 。 

下 面 将 从 浏览 器 的 构成 开始 ,对 浏览 器 的 运行 原理 进行 简单 的 讲解 。 之 后 ,将 具体 
地 介绍 几 款 主流 的 浏览 器 。 


1.3.2 浏览 器 构成 


运行 在 计算 机 上 的 浏览 器 软件 通常 由 用 户 界面 .浏览 器 引擎 、 泻 染 引 擎 、 网 络 、 
JavaScript 解释 器 以 及 数据 存储 构成 。 在 这 些 组 成 部 分 当中 ,除了 用 户 界 面 对 于 每 一 个 用 
户 来 说 都 可 以 直接 可 见 外 ,其 他 的 组 成 部 分 , 像 网 络 、JavaScript 解释 器 和 数据 存储 这 三 部 
分 ,对 于 开发 者 来 说 ,可 以 有 限 地 通过 浏览 器 的 调试 界面 对 它们 的 运行 进行 观察 和 调试 。 而 
浏览 器 引擎 和 泻 染 引擎 这 两 部 分 , 则 很 好 地 被 浏览 器 厂商 封装 ,默默 地 在 浏览 器 运行 时 进行 
工作 ,使 用 者 几乎 感受 不 到 它们 的 存在 。 

1. 用 户 界面 (User Interface) 

浏览 器 的 用 户 界面 就 是 指 用 户 能 够 直接 与 浏览 器 进行 交互 的 部 分 ,简单 来 说 ,就 是 打开 





浏览 器 窗口 后 ,可 以 看 到 的 一 些 基 本 的 部 分 。 通 常 来 说 ,无 论 哪 一 个 厂商 的 浏览 器 都 会 包含 
四 个 基本 部 分 。 

° 地址 栏 ,用 户 可 以 通过 输入 网 址 对 特定 网 站 进行 访问 。 

。 前 进 和 后 退 按 钮 ,用 户 可 以 通过 它们 跳 转 到 前 一 个 或 后 一 个 页 面 。 

。 添加 书签 选项 ,用 户 可 以 将 自己 感 兴趣 的 网 页 进行 收藏 ,以 便 以 后 可 以 快速 访问 。 

° 刷新 和 停止 的 按钮 ,用户 可 以 通过 单 击 刷 新 按钮 ,对 同一 页 面 的 资源 再 次 获取 ,或 通 

过 单 击 停止 按钮 ,停止 当前 进行 中 的 重新 获取 页 面 过 程 。 

2. 浏览 器 引擎 (Browser Engine? 

浏览 器 引擎 的 主要 作用 是 对 用 户 界 面 ` 演 染 引 擎 和 网 络 进行 协调 ,在 它们 之 间 传 送 
指令 。 

3. 泻 染 引 敬 (Rendering Engine) 

泻 染 引擎 的 主要 作用 是 对 所 获取 到 的 网 络 资源 ,如 HTML, CSS 文件 等 进行 解析 ,并 将 
文档 资源 转换 为 视觉 信息 展示 给 用 户 。 在 访问 同一 页 面 时 ,可 能 会 发 现 不 同 浏览 器 的 展示 
效果 各 不 相同 ,这 是 因为 这 些 浏览 器 通常 使 用 的 是 不 同 的 泻 染 引擎 。 例 如 ,Chrome 和 
Opera 浏览 器 使 用 的 是 Blink 引擎 , Safari 使 用 的 是 WebKit 引擎 ,而 FireFox 使 用 的 是 
Gecko 引擎 。 

4. 网 络 (Network) 

浏览 器 的 网 络 部 分 ,主要 的 任务 是 处 理 浏览 器 网 络 相关 的 事物 ,例如 HTTP 请 求 的 发 
送 与 响应 的 接收 等 。 其 接口 与 平台 无 关 , 并 为 所 有 平台 提供 底层 实现 。 

5. 用 户 界面 后 端 (UI Backend) 

用 户 界面 后 端 主 要 用 于 绘制 基本 的 窗口 组 件 , 比 如 组 合 分 页 面 和 窗口 。 其 提供 了 与 平 
台 无 关 的 通用 接口 ,并 在 底层 使 用 所 运行 操作 系统 的 UI 方法。 

6. JavaScript 解释 器 (JavaScript Interpreter) 

为 了 给 网 页 增添 方法 与 逻辑 ,我 们 需要 一 种 编程 语言 。JavaScript 历经 十 多 年 的 考验 
最 终 成 为 所 有 浏览 器 认可 的 页 面 逻 辑 实现 语言 。 为 了 理解 并 执行 JavaScript 代码 ,每 个 浏 
览 器 都 需要 有 JavaScript 解释 器 ,有 时 也 称 作 JavaScript 引擎 ,来 解析 和 执行 JavaScript (Š 
码 。 类 似 地 ,JavaScript 解释 器 也 是 因 浏 览 器 而 异 的 。 例 如 ,IE 的 Chakra, FireFox 的 
SpiderMonkey, 以 及 Chrome 的 V8, 

7. 数据 存储 (Data Storage) 

浏览 器 的 数据 存储 部 分 主要 负责 帮助 使 用 者 在 本 地 保存 一 些 信 息 , 提供 的 机 制 有 
Cookie 和 本 地 存储 ,支持 HTML5 的 浏览 器 还 有 本 地 数据 库 可 以 使 用 。 这 些 机 制 都 可 以 让 
用 户 在 浏览 器 反复 刷新 和 获取 新 页 面 的 过 程 中 长 时 间 保 存 一 系列 的 数据 。 


1.3.3 浏览 器 工作 主流 程 


浏览 器 具体 的 工作 原理 是 相对 复杂 的 ,但 我 们 可 以 简单 了 解 一 下 其 大 概 的 工作 过 程 ,并 
认识 几 个 重要 的 概念 。 
首先 将 浏览 器 的 一 次 工作 的 开始 约定 为 打开 浏览 器 ,这 时 用 户 界面 后 端 将 会 调用 浏览 
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器 所 处 的 操作 系统 环境 的 UI 相关 方法 ,绘制 窗口 并 为 用 户 显 示 浏 览 器 软件 。 然 后 ,浏览 器 
的 用 户 界面 , 即 UI, 将 以 直观 的 图 形 界面 向 用 户 展示 浏览 器 的 相关 功能 。 用 户 可 以 与 图 形 
界面 交互 ,来 使 用 浏览 器 。 

通常 浏览 器 的 主要 任务 是 帮助 用 户 浏览 网 站 。 当 用 户 在 浏览 器 的 地 址 栏 内 完成 网 址 输 
入 后 ,浏览 器 会 根据 这 个 网 址 确定 用 户 所 要 获取 的 网 站 资源 的 位 置 ,这 个 资源 将 会 具体 到 哪 
个 服务 器 上 的 哪 一 个 文件 ,这 个 文件 通常 是 一 个 HTML 文档 ,作为 网 页 可 以 被 浏览 器 展 
示 。 而 一 个 网 页 上 的 资源 ,在 大 多 数 情况 下 ,不 仅仅 是 HTML 文档 ,还 包括 为 这 个 网 页 提 
供 样式 的 CSS 文档 ,或 者 为 页 面 提供 逻辑 的 JavaScript 文档 ,以 及 一 些 可 能 的 多 媒体 资源 
(图 片 .音频 视频 等 )。 这 些 其 他 相关 资源 的 位 置 都 会 在 HTML 文档 中 描述 ,会 在 一 次 输 
入 网 址 访问 后 一 并 获取 ,然后 由 浏览 器 展示 给 用 户 。 

在 输入 网 址 进行 访问 资源 操作 后 ,浏览 器 的 网 络 部 分 将 负责 向 特定 的 服务 器 发 送 请 求 ， 
索要 某 一 特定 资源 。 当 服务 器 端 收 到 请 求 后 会 对 其 进行 处 理 。 如 果 有 相应 的 资源 , 则 返回 
含有 资源 的 响应 给 浏览 器 ,否则 将 会 向 浏览 器 返回 错误 响应 。 

假设 ,服务 器 经 过 对 浏览 器 所 发 送 的 请 求 处 理 完成 之 后 ,发 现 有 相应 的 资源 可 以 提供 。 
那么 ,这 些 资源 就 会 被 服务 器 发 送 , 并 经 过 网 络 再 返回 给 浏览 器 。 当 浏览 器 获得 相应 的 资源 
后 ,是 不 能 马上 将 资源 展示 给 用 户 的 ,因为 这 些 资源 是 以 文档 的 形式 进行 传播 的 , 即 只 能 被 
计算 机 理解 ,而 不 能 被 普通 用 户 理解 。 所 以 ,浏览 器 需要 对 所 获取 的 资源 进行 解析 。 

这 时 , 演 染 引擎 将 开始 它 的 主要 工作 一 一 对 HTML 和 CSS 文档 进行 解析 并 显示 。 首 
先 , 演 染 引擎 会 解析 HTML 文档 ,并 构建 一 个 文档 对 象 模型 (Document Object Model, 
DOMD , 它 是 一 个 包含 HTML 文档 中 各 标签 元 素 的 树 形 模型 ,简称 DOM 树 。DOM 的 逻辑 
结构 类 似 于 图 1.4, 它 是 关于 如 何 获取 、 修 改 、 添 加 或 删除 HTML 元 素 的 标准 。 即 HTML 
文档 中 定义 的 标签 如 何 转 化 为 一 个 统一 的 逻辑 结构 ,以便 进 行 后 续 的 解析 工作 。 
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图 1.4 DOM 树 结构 


DOM 树 由 一 个 个 DOM 节点 (DOM Nodo) , 即 一 个 个 HTML 元 素 组 成 。 当 这 染 引擎 
将 HTML 文档 解析 为 DOM 树 之 后 ,引擎 将 对 该 文档 相关 联 的 CSS 文档 进行 解析 ,对 
DOM 树 中 各 节点 的 风格 样式 进行 获取 ,并 添加 到 DOM 树 , 进 而 形成 泻 染 树 Render 


Tree) ,如 图 1.5 所 示 。 
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泻 染 引擎 将 根据 已 经 解析 得 到 的 内 容 , 进 行 页 面 的 具体 展示 ,然后 用 户 才 能 看 到 一 个 网 
页 。 当 然 ,由 于 浏览 器 软件 的 运行 速度 足够 快 ,以 至 于 普通 的 使 用 者 并 不 能 察觉 到 上 述 这 些 
过 程 ,所 以 给 用 户 造 成 的 假象 就 是 输入 网 址 后 ,浏览 器 马上 给 出 显示 。 

至 于 JavaScript 解释 器 ,一 般 来 说 , 它 将 在 HTML 页 面 展示 之 后 进行 工作 , 当然 
HTML5 也 可 以 让 JavaScript 代码 在 后 台 运 行 。 由 于 JavaScript 是 一 种 解释 型 语言 , 它 不 
需要 提前 进行 编译 ,而 是 在 运行 过 程 中 解释 执行 。 这 样 的 模式 也 符合 给 网 页 添加 逻辑 的 具 
体 需 要 , 当 用 户 与 页 面 进行 交互 时 ,JavaScript 解释 器 就 会 解释 执行 相应 的 代码 。 

在 浏览 一 个 个 网 页 的 过 程 中 ,网 站 的 开发 者 可 能 希望 用 户 在 本 地 保存 一 些 数据 ,这 就 要 
涉及 数据 存储 的 功能 了 。 浏 览 器 会 以 站 点 来 划分 所 保存 在 用 户 本 地 的 数据 。 

最 后 还 有 浏览 器 引擎 , 它 在 浏览 器 中 扮演 的 角色 ,在 某 种 程度 上 ,类 似 于 操作 系统 之 于 
计算 机 ,负责 协调 浏览 器 各 个 部 分 来 正确 地 工作 运行 。 

上 述 的 浏览 器 主要 流程 的 介绍 仅 供 参考 ,真实 而 具体 的 过 程 更 为 复杂 ,请 有 兴趣 的 读者 
自行 搜索 学 习 。 


1.3.4 主流 浏览 器 


尽管 市 面 上 的 浏览 器 有 许多 版 本 ,但 是 浏览 器 的 工作 过 程 基本 上 都 符合 前 面 的 描述 。 
下 面具 体 认识 一 下 目前 主流 的 几 款 浏览 器 ,如 图 1.6 所 示 。 


ceoece 


图 1.6 主流 浏览 器 


1.5 泻 染 树 结构 
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1. Chrome 

Google Chrome, 又 称 谷 歌 浏 览 器 ,是 一 个 由 Google( 谷 歌 ) 公 司 开 发 的 免费 网 页 浏览 
器 。“Chrome” 是 化 学 元 素 “ 铬 ”的 英文 名 称 ; 过 去 也 用 Chrome 称呼 浏览 器 的 外 框 。 该 软件 
的 程序 代码 是 基于 其 他 开放 源 代码 软件 撰写 的 ,包括 WebKit 和 Mozilla, 目标 是 提升 稳定 
性 、 速 度 和 安全 性 ,并 创造 出 简单 且 有 效率 的 使 用 者 界面 。 

2. Safari 

Safari, 是 苹果 计算 机 的 操作 系统 Mac OS 中 的 浏览 器 ,使 用 了 KDE 的 KHTML 作为 
浏览 器 的 运算 核心 。Safari 是 苹果 计算 机 的 操作 系统 Mac OS 中 的 浏览 器 ,用 来 取代 之 前 
的 Internet Explorer for Mac。 该 浏览 器 已 支持 Windows 平 台 , 但 是 与 运行 在 Mac OSX 上 
的 Safari 相 比 ,有 些 功能 出 现 丢失 。Safari 也 是 iPhone 手机 .iPod Touch, iPad 平板 电脑 中 
iOS 指定 的 默认 浏览 器 。 

3. Opera 

Opera 浏览 器 ,创始 于 1995 年 4 月 ,是 一 款 由 挪威 Opera Software ASA 公司 制作 的 支 
持 多 页 面 标签 式 浏览 的 网 络 浏览 器 。 它 是 跨 平台 浏览 器 ,可 以 在 Windows, Mac 和 Linux 
三 个 操作 系统 平台 上 运行 。Opera 浏览 器 因 其 快速 .小 巧 和 比 其 他 浏览 器 更 佳 的 标准 兼容 
性 而 获得 了 国际 上 的 最 终 用 户 和 业界 媒体 的 其 承认 ,并 在 网 上 受到 很 多 人 的 推崇 。 

4. IE 

Internet Explorer, 是 微软 公司 推出 的 一 款 网 页 浏览 器 。 原 称 Microsoft Internet 
Explorer(6 版 本 以 前 ) 和 Windows Internet Explorer(7,8,9,10,11 版 本 ), 简 称 IE, TE IE7 
以 前 ,中 文 直译 为 “网 络 探 路 者 ”, 但 在 IE7 以 后 官方 便 直接 俗称 *IE 浏览 器 ”"。2015 年 3 月 ， 
微软 确认 放弃 IE 品牌 , 转 而 在 Windows 10 上 由 Microsoft Edge 取代 。 微 软 于 2015 年 10 
月 宣布 2016 年 1 月 起 停止 支持 老 版 本 I 浏览 器 。 

5. Firefox 

Mozilla Firefox, 中 文 俗称 "火狐 ”( 正 式 缩写 为 Fx 或 fx, 非 正式 缩写 为 FF) ,是 一 个 自 
由 及 开放 源 代 码 网 页 浏览 器 ,使 用 Gecko 排版 引擎 ,支持 多 种 操作 系统 ,如 Windows、Mac 
OS X & GNU/Linux 等 。Firefox 的 开发 目标 是 “尽情 地 上 网 浏览 "和 “对 多 数 人 来 说 最 棒 
的 上 网 体验 ”, 它 对 大 部 分 的 网 络 标准 都 有 很 好 的 支持 ,并 且 拥 有 相对 出 色 的 性 能 , 除 此 之 外 
还 给 予 用 户 许多 个 性 化 的 选择 。 


1.4 HTML 


HTML 是 超 文 本 标记 语言 (HyperText Markup Language) 的 英文 缩写 ,从 HTML 最 
时 的 定义 来 看 , 超 文本 指 代 的 就 是 超级 链接 , 它 不 仅仅 是 文本 ,而且 还 包含 一 个 指向 另 一 文 
本 信息 的 链接 。 随 着 时 间 的 发 展 , 超 文本 有 了 更 宽泛 的 定义 ,超越 普通 文本 内 容 意 义 的 内 容 
几乎 都 可 以 被 称 为 超 文本 。 浏 览 者 可 以 通过 点 击 一 个 链接 从 而 跳 转 至 另 一 个 页 面 。 而 所 谓 
标记 语言 ,简单 来 说 ,是 通过 一 种 特殊 的 标记 形式 ,让 文本 中 的 一 部 分 不 再 是 单纯 的 文本 信 
息 ,而 是 可 以 被 计算 机 所 识别 并 利用 的 特殊 信息 。 读 者 在 后 续 的 学 习 中 ,会 逐步 有 一 个 更 为 
深刻 的 认识 。 

HTML 文档 是 构成 网 页 的 基石 , 它 的 扩展 名 是 . html, 它 描述 并 定义 了 网 页 的 内 容 ,并 


由 浏览 器 负责 解析 并 呈现 给 使 用 者 。 接 下 来 介绍 HTML 文档 的 基本 结构 。 
1.4.1 HTML 文档 基本 结构 
文件 名 : HTML 文档 基本 结构 . html 


«! DOCTYPE HTML > 
<html lang = "en-US"> 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 


</body> 
</html > 


以 上 是 一 个 HTML 文档 所 应 具有 的 基本 结构 。 由 于 HTML 文档 采用 结构 化 的 标记 
语言 ,所 以 ,简单 地 观察 文档 内 容 ,不 难 发 现 HTML 文档 是 由 一 个 个 标签 组 成 的 ,这 些 标签 
大 都 为 开 闭 标签 成 对 出 现 , 如 < html></html>、< head ></head > 等 。 并 且 , 它 们 都 以 结构 
化 的 方式 进行 嵌 套 组 合 , 即 一 个 开 闭 标签 组 合 不 能 横 跨 另 一 个 开 闭 标签 组 合 , 如 < html > 
<head ></html >< head >, 这 样 的 写法 是 不 被 允许 的 。 

几乎 每 个 HTML 文档 都 需要 符合 上 述 的 基本 格式 ,必须 具有 如 下 几 个 部 分 ， 


<! DOCTYPE HTML > 
这 一 行 代码 进行 了 文档 类 型 声明 ,声明 此 文档 是 一 个 HTML 文档 。 
<html lang = "en - US"></htm1 > 


< html > 标签 是 一 个 HTML 页 面 的 根 元 素 , 即 < html > 标签 对 是 HTML 文档 最 外 层 的 
标签 ,其 他 所 有 标签 都 需要 嵌 套 于 该 标签 对 之 中 。 在 这 个 标签 中 ,lang= "en-US" 语 句 表示 
这 个 标签 所 具有 的 属性 ,意思 是 表明 当前 HTML 文档 内 使 用 的 语言 , 它 可 以 帮助 搜索 引擎 
更 好 地 识别 分 类 。 

< head » «/head » 

< head > 标签 通常 包含 一 个 HTML 文档 的 元 信息 ,所 谓 元 信息 ,就 是 描述 数据 的 数据 ， 
该 标签 对 内 的 信息 不 会 直接 显示 在 网 页 的 页 面 内 ,而 是 对 HTML 文档 的 解析 过 程 产生 影 
响 。 通 常 ,< head > 标签 对 内 会 包含 < title >, < style >,< meta >,< link > 和 < script > 等 几 种 
标签 。 在 后 续 的 内 容 中 ,会 逐步 介绍 。 


« neta charset = "UTF - 8"> 
该 行 代码 表明 该 HTML 文档 采用 UTF-8 的 编码 方式 。 
<title></title> 


< title > 标签 用 来 指定 该 网 页 的 命名 ,通常 这 个 命名 会 被 显示 在 浏览 器 的 窗口 分 页 栏 
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上 ,如 图 1.7 所 示 。 
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图 1.7 title 标签 指 定 网 页 的 命名 


< body ></body > 
< body > 标签 内 用 来 定义 一 个 HTML 文档 可 见 的 网 页 内 容 。 
1.4.2 HTML 元 素 


HTML 文档 是 由 一 个 个 标签 (tag) 构 成 的 ,这 些 标签 同时 也 可 以 被 称 作 元 素 
(element)。 下 面 介绍 HTML 文档 中 几 个 最 为 常见 的 元 素 , 它 们 分 别 是 标题 元 素 、 段 落 元 
素 、 图 片 元 素 以 及 链接 元 素 。 

1. 标题 元 素 

标题 元 素 用 来 表示 一 个 网 页 内 的 标题 ,就 像 平时 使 用 的 文字 编辑 软件 一 样 ,可 以 对 标题 
进行 设置 ,如 一 级 标题 二 级 标题 等 。HTML 文档 中 的 标题 元 素 也 有 类 似 的 功能 。 标 题 元 
素 由 < h > 开 闭 标签 组 成 ,h 代表 英文 的 heading, 即 为 标题 。 标 题 元 素 在 浏览 器 中 的 展示 效 
果 如 图 1.8 所 示 。 

文件 名 : 标题 元 素 . html 


<! DOCTYPE HTML > 


<html lang = "en 一 US"> 
<head> 
< meta charset = "UTF — 8"> 
«title»«/title» 
</head> 
<body> 
< hl > 这 是 一 个 标题 </hl > 
< h2 > 这 是 一 个 标题 </h2 > 
< h3 > 这 是 一 个 标题 </h3 > 
< h4 > 这 是 一 个 标题 </h4 > 
<h5 > 这 是 一 个 标题 </h5 > 
</body> 
</html> 
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图 1.8 标题 元 素 


2. 段落 元 素 


<p > 标签 定义 段落 元 素 ,浏览 器 会 自 适应 地 对 < p > 开 闭 标签 内 的 文本 进行 排版 ,进而 
可 以 在 网 页 内 正常 显示 ,p 代表 英文 的 paragraph。 段 落 元 素 在 浏览 器 中 的 展示 效果 


如 图 1.9 所 示 。 
文件 名 : 段落 元 素 . html 
«! DOCTYPE HTML > 


< html lang = "en- US" 
<head> 
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< meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
<h> 这 是 一 个 标题 </h> 
<p> 这 是 一 个 段落 ,这 真 的 是 一 个 段落 , 真 的 啊 </p> 
</body> 
</html> 


/ D 段落 元 素 html x Wb 
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1.9 段落 元 素 


3. 图 片 元 素 

<img > 标签 用 来 定义 HTML 文档 中 的 图 片 元 素 ,通过 指定 < img > 标签 的 src 属性 , 即 
图 片 资源 的 位 置 ,来 确定 HTML 文档 内 所 要 包含 的 图 片 资源 。 而 alt 属性 则 用 来 设 定 当 图 
片 不 能 正确 加 载 后 所 显示 的 文字 或 图 片 ,alt 是 英文 alternative 的 缩写 。 图 片 元 素 在 浏览 器 
中 的 展示 效果 如 图 1. 10 所 示 。 

文件 名 : 图 片 元 素 . html 


<! DOCTYPE HTML > 
< htnl lang = "en- US"> 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 


< img src = "dog. jpg" alt = "这 里 应 该 有 个 狗 子 " /> 











</body> 
</html> 
aj|e m 3 | 
A D 图 片 元 素 .html x NA 
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图 1.10 图 片 元 素 


4. 链接 元 素 
<a> 标 签 表示 一 个 页 面 内 的 链接 元 素 , 用 户 可 以 通过 点 击 这 段 文本 , 跳 转 到 另 一 个 页 面 


上 。 正 是 由 于 这 种 性 质 , 它 不 仅仅 是 文本 ,而 是 超 文本 。< a > 标签 的 href 属性 用 来 定义 所 
链接 的 新 网 页 ,href 是 超 文本 引用 (Hypertext Reference) 的 缩写 。 链 接 元 素 在 浏览 器 中 的 
展示 效果 如 图 1. 11 所 示 。 


文件 名 : 链接 元 素 . html 


<! DOCTYPE HTML > 
<html lang= "en- US"> 
<head> 
< meta charset = "UTF - 8"> 
<title></title> 
</head> 
<body> 
<a href = "http: // info. cern. ch/hypertext/WWW/TheProject. html"> 这 是 世界 上 第 一 个 网 站 
</a> 
</body> 
</html > 
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1.11 链接 元 素 


1.4.3 HTML 属性 


所 有 的 HTML 元 素 都 可 以 有 属性 (attribute) ,属性 会 提供 一 些 额 外 的 信息 来 定义 
HTML 的 元 素 。 在 之 前 的 < html > 和 < meta > 标签 中 ,我 们 已 经 见 过 了 属性 。 

从 形式 上 来 说 ,属性 信息 以 键 值 对 的 形式 被 写 在 开始 标签 内 。 例 如 ,< p id 一 
"myParagraph"></p >。 并 且 ,一 般 建议 使 用 小 写 的 形式 进行 属性 和 值 的 书写 ,同时 ,属性 
值 需要 被 引号 包括 ,一 般 为 双 引 号 。 

HTML 的 属性 一 般 因 标 签 的 类 型 而 异 ,但 大 部 分 HTML 元 素 都 有 一 些 共有 的 属性 ,对 
于 HTML 的 开发 者 来 说 ,其 实 并 没有 必要 记 住 每 一 个 可 以 使 用 的 属性 ,只 需 掌 握 常用 的 属 
性 即 可 。 下 面 介绍 一 些 经 常 使 用 的 属性 。 

1. id 属性 

该 属性 为 某 一 个 元 素 指定 一 个 id, 从 而 这 个 元 素 可 以 被 CSS #ll JavaScript 选择 并 访问 。 
例如 ,<p id— "myParagraph"7, 

2. class 属性 

该 属性 可 以 为 好 几 个 元 素 指定 同一 个 类 ,从 而 让 属于 这 个 类 的 所 有 元 素 可 以 被 CSS 和 
JavaScript 一 并 选择 并 访问 。 例 如 ,< p class 一 "myClass">。 

3. style 属性 

设置 该 属性 可 以 直接 为 所 描述 元 素 添加 CSS 样式 。 例 如 ,< p style=" font-family: 
verdana;font-size:20px;">。 在 style 属性 内 ,可 以 添加 多 组 键 值 对 ,并 以 分 号 分 割 。 


4. title 属性 
该 属性 为 一 个 元 素 添 加 额外 的 文本 信息 ,在 网 页 中 , 当 鼠 标 指针 移 过 该 元 素 后 ,就 会 显 
示 该 文本 信息 。title 属性 的 展示 效果 如 图 1. 12 所 示 。 
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1.12 title 属性 


5. alt 属性 

该 属性 指定 当 < img > 元 素 中 的 图 片 资源 未 能 加 载 时 所 显示 的 文字 或 图 片 。 例 如 ,< img 
src 一 "dog. jpg" alt 一 "这 里 应 该 有 个 狗 子 ”/>。 

6. src 属性 

该 属性 指定 < img > 标签 所 引用 资源 的 统一 资源 定位 符 , 即 URL sre 是 source 的 缩写 。 

7. width 和 height 属性 

这 两 个 属性 指定 一 个 元 素 的 宽度 和 高 度 ,可 以 被 描述 的 元 素 可 以 是 <img >.< canvas >, 
< div > 等 。 例 如 ,< div width="200px" height— "200px"»«/div >, 

8. href 属性 

该 属性 指定 一 个 跳 转 链接 的 具体 地 址 ,例如 ,< a href =" http://info. cern. ch/ 
hypertext/ WWW/TheProject. html"> 这 是 世界 上 第 一 个 网 站 </a >。 


1.4.4 HTML 注释 


很 多 情况 下 ,开发 者 所 编写 的 代码 并 不 是 一 成 不 变 的 ,需要 有 人 来 维护 和 修改 ,以 适应 
新 的 需求 。 这 时 ,在 代码 中 就 需要 用 注释 (comments) 来 进行 沟通 ,注释 在 每 一 种 计算 机 语 
言 中 都 会 在 代码 解析 的 过 程 中 被 忽略 , 仅 被 开发 人 员 所 见 。 
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HTML 文档 中 的 注释 以 “<--1” 开 始 , 以 “-->” 结 束 。 
HTML 文档 中 注释 的 具体 使 用 如 下 : 
文件 名 : HTML 注释 . html 


<! DOCTYPE HTML > 
< html lang = "en- US"> 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
«hi > 我 是 一 个 标题 </hl > 
<p> 我 是 一 个 段落 </p> 
<! -- 我 是 一 行 注释 ,但 不 会 被 显示 到 页 面 中 --> 
ees 
这 样 的 话 
我 还 可 以 是 
好 几 行 注释 
--» 
</body> 
«/htnl» 


上 述 代码 中 的 注释 并 不 被 显示 在 页 面 中 ,如 图 1.13 所 示 。 
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1.13 HTML 注释 


1.5 CSS 


CSS TÉ JE SE FESUR (Cascading Style Sheet) , 它 是 一 门 描 述 HTML 文档 风格 样式 的 语 
言 ,定义 了 每 个 HTML 文档 内 元 素 应 当 如 何 被 浏览 器 显示 。 


1.5.1 CSS 引用 方法 


CSS 语言 可 以 有 3 种 引用 方法 ,它们 分 别 是 外 部 样式 表 (External style sheet? .内 部 样 
I XX CInternal style sheet) 以 及 内 联 样式 (Inline style)。 通 过 这 3 种 的 其 中 一 种 或 几 种 都 可 
以 实现 CSS 语言 对 HTML 文档 内 元 素 的 描述 。 

1. 外 部 样式 表 

外 部 样式 表 将 CSS 和 HTML 分 割 开 来 ,独立 形成 CSS 文档 ,其 扩展 名 为 . css, 在 
HTML 文档 内 的 < head > 标签 内 添加 引用 即 可 。 引 用 方式 如 下 ,展示 效果 如 图 1. 14 所 示 。 
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图 1.14 CSS 外 部 样式 表 


文件 名 : CSS 外 部 样式 表 . html 


<!DOCTYPE HTML > 
<html lang = "en 一 US"> 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 
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< link rel = "stylesheet" href = "mystyle.css" /> 
</head> 
<body> 

< hl > 这 个 标题 超级 大 </hl > 

<p> 这 是 一 个 段落 ,这 真 的 是 一 个 段落 , 真 的 啊 </p> 
</body> 
</html > 


文件 名 : mystyle. css 


hi( 
font- size: 80px; 


) 


2. 内 部 样式 表 

不 同 于 外 部 样式 表 , 内 部 样式 表 的 CSS 样式 被 添加 到 文档 内 。 这 种 方法 通过 在 
<head > 标签 内 添加 < style > 标签 实现 。 在 < style > 标签 内 编写 CSS 语句 即 可 完成 对 
HTML 文档 元 素 样式 的 添加 。 具 体 使 用 方法 如 下 : 

文件 名 : CSS 内 部 样式 表 . html 


<! DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF - 8"> 
<title></title> 
<style> 
hi{ 
font- size: 80px; 
) 
</style> 
</head> 
< body> 
«hl > 这 个 标题 超级 大 </hl > 
<p> 这 是 一 个 段落 ,这 真 的 是 一 个 段落 , 真 的 啊 </p> 
</body> 
</html> 


3. 内 联 样式 

内 联 样式 通过 将 CSS 语句 直接 写 人 HTML 元 素 的 style 属性 内 来 实现 样式 的 添加 , 同 
一 元 素 内 的 多 个 CSS 属性 设置 以 分 号 分 割 。 具 体 使 用 方式 如 下 : 

文件 名 : CSS 内 联 样 式 . html 


<!DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 


</head> 
< body> 
« hl style = "font - size:80px;"> 这 个 标题 超级 大 </hl > 
<p> 这 是 一 个 段落 ,这 真 的 是 一 个 段落 , 真 的 啊 </p> 
</body> 
</html> 


1.5.2 CSS 语法 


CSS 规则 由 两 个 主要 部 分 构成 ,分 别 是 选择 器 (selector) 与 声明 语句 (declaration) 。 基 
本 形式 为 : selector (declarationl; declaration2; ++; declarationN; } 。 在 一 个 CSS 文档 中 ， 
可 以 设置 多 个 如 此 形式 的 选择 器 和 声明 语句 组 合 。 

1. 声明 

CSS 声明 语句 出 现在 选择 器 之 后 的 大 括号 内 ,以 属性 和 值 的 组 合 形式 出 现 ,并 以 分 号 
分 割 不 同 的 键 值 对 。 形 式 如 下 : 


hi( 
font- size: 80px; 
color: red; 


) 


2. 选择 器 

选择 器 的 作用 是 将 CSS 的 属性 设置 语句 , 即 声明 语句 ,与 HTML 文档 内 的 元 素 建立 联 
系 ,这 个 过 程 就 是 “选择 ”。 选 择 器 本 身 是 对 被 选择 的 HTML 文档 内 元 素 的 一 种 表示 ,通常 
有 以 下 几 种 常用 的 选择 方式 ,它们 分 别 是 元 素 选择 ,id 选择 、class 选择 以 及 组 合 选 择 。 

1) 元 素 选择 

元 素 选择 器 以 HTML 文档 元 素 的 名 称 为 选择 依据 ,例如 ,如 果 使 用 一 个 p 作为 选择 
器 ,就 会 选择 HTML 文档 内 全 部 的 段落 元 素 作 为 被 修饰 的 对 象 。 


p{ 
font - size: 80px; 
color: red; 
) 
2) id 选择 
id 选择 器 以 HTML 文档 内 元 素 的 id 作为 选择 依据 。 一 般 来 说 ,一 个 HTML 文档 内 元 
素 所 设 定 的 id 是 唯一 的 。 使 用 id 选择 器 ,可 以 直接 地 定位 单个 想 要 修饰 的 元 素 。id 选择 器 
H“ "5 WOW id 命名 组 合 而 成 。 假 设 有 一 个 < p > 标签 , 形 如 “<p id 一 "myPara"> 这 是 
一 个 段落 ,这 真 的 是 一 个 段落 , 真 的 啊 </p >”。 为 这 个 元 素 添加 样式 的 方式 如 下 : 


# myPara{ 
font- size: 10px; 


color: blue; 
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3) class 选择 

class 选择 器 以 HTML 文档 内 元 素 的 class 属性 值 作为 选择 依据 ,一般 来 说 ,多 个 相同 
或 不 同 的 元 素 可 以 设 定 相同 的 class 命名 。 这 样 就 可 以 实现 对 HTML 文档 内 多 个 元 素 的 
选择 ,并 组 合 添 加 样式 。class 选择 器 由 “. ”符号 与 被 选 class 命名 组 合 而 成 。 


.myClass( 
font- size: 10px; 
color: blue; 
j 
4) 组 合 选择 
组 合 选择 的 方式 将 对 多 个 不 同 的 HTML 元 素 进行 选择 并 添加 样式 。 组 合 选择 器 由 多 
个 元 素 组 成 ,不 同 元 素 之 间 以 “, "分隔 。 
hi,p( 
font- size: 80px; 


color: red; 


) 


3. CSS 注释 
类 似 地 ,CSS 中 也 可 以 编写 一 些 不 会 被 浏览 器 识别 解析 的 语句 作为 注释 ,以 便于 开发 
人 员 之 间 的 相互 沟通 。CSS 文档 中 注释 的 形式 以 “/ * ?作为 开始 ,以 "* /” 作 为 结束 ,可 以 
为 单行 也 可 以 为 多 行 。 
hi{ 
font - size: 80px; 
color: red; 
) 
/* 我 是 一 行 注释 x / 
/x* 我 是 
好 几 行 
注释 
*/ 


1.5.3 £&H 3 


在 HTML 文档 中 ,一 个 个 HTML 元 素 都 可 以 被 视 为 一 个 个 盒子 ,我 们 使 用 盒 模型 
(box-model) 来 定义 一 个 HTML 元 素 的 显示 方式 ,具体 包含 内 容 (content)、 内 边 距 
(padding) 、 边 框 (border) 和 外 边 距 (margin) 这 几 部 分 。 

1. 结构 

盒 模型 的 一 般 结构 如 图 1. 15 所 示 ,简单 来 说 就 是 元 素 外 有 一 个 盒子 , 即 边框 。 这 个 “ 盒 
子 ? 与 外 部 边界 有 一 个 距离 ,是 外 边 距 。“ 盒 子 ? 与 内 容 本 身 有 一 个 距离 ,是 内 边 距 。 

1) 内 容 

内 容 区 域 ,代表 HTML 元 素 本 身 , 是 文本 信息 或 图 片 等 显示 的 地 方 。 一 般 HTML 元 
素 的 width 和 height 属性 作用 的 是 这 部 分 区 域 ,HTML 元 素 的 长 宽 属 性 并 不 完全 决定 一 个 


margin 外 边 距 
padding 内 边 距 





I 1 
I 1 
I 1 
1 1 
I 1 
! 1 
1 1 
1 - 

E 元 素 | 
1 ' 
1 ' 
1 ' 
! ' 
! ' 
1 1 
! ' 











图 1.15 ffs 


元 素 在 页 面 中 真实 的 大 小 ,最 终 大 小 还 会 受到 内 边 距 、 外 边 距 以 及 边框 宽度 的 影响 。 

2) 内 边 距 

内 边 距 代 表 边 框 与 元 素 内 容 之 间 的 距离 ,有 4 个 方向 的 距离 可 以 设置 调整 。 

3) 边框 

边框 是 乃 绕 在 内 容 外 的 边界 ,与 内 容 之 间 有 内 边 距 分 割 。 边 框 一 般 可 以 设置 粗细 形式 
( 实 线 .虚线 ) 以 及 颜色 。 

4) 外 边 距 

外 边 距 是 边框 与 HTML 元 素 的 实际 边界 的 距离 ,如 图 1. 15 中 的 最 外 虚线 部 分 。 外 边 
距 同 内 边 距 一 样 ,有 4 个 方向 的 距离 可 以 进行 设置 调整 。 

2. 使 用 

下 面 这 个 实例 演示 了 如 何 对 HTML 元 素 的 盒 模型 相关 属性 进行 设置 。 为 了 展示 需 
要 ,该 实例 中 包含 两 个 < div > 元 素 ,并 为 嵌 套 关系 ,外 层 < div > 被 设置 了 确定 宽度 、 高 度 以 及 
边框 样式 。 其 在 浏览 器 中 的 展示 效果 如 图 1. 16 所 示 。 

文件 名 : 盒 模 型 . html 


<!DOCTYPE HTML > 
<html lang = "en- US" 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 
«style» 
# myDiv( 
width: 200px; 
height: 200px; 
border: 3px dashed black; 
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padding:25px 25px 25px 25px; 
margin: 25px 25px 25px 25px; 
) 
</style> 
</head> 
< body> 
< div style = "border:3px solid black;width:300px; height :300px; "> 


<div id= "myDiv"> 








救命 啊 , 我 变 成 了 div 元 素 
</div> 
</div> 
</body> 
</html> 
' BSCE 

/ D 盒 模型 ,html x NA 

C | © filey//EJHTMLS5/HTMLS/HTML5/ 预 备 知识 /会 模型 html ®t]: 








1 
' 
' 
' 
' 
' 
' 
' 
' 
' 
' 
' 
' 
' 
' 
' 
' 
' 
' 
' 
' 
' 
' 
' 
' 

4 

















1.16 ARA HEH 


代码 中 ,我 们 使 用 了 缩 略 方式 进行 了 相关 属性 的 定义 ,包括 border, padding, margin = 
个 属性 。 实 例 中 的 border 属性 是 border-width border-style 和 border-color 的 顺序 集合 ， 
依次 代表 边框 宽度 ,边框 形式 和 边框 颜色 。 类 似 地 ,padding 属性 是 padding-top. padding- 
right, padding-bottom 和 padding-left 的 顺序 集合 ,依次 代表 上 ,布下 、 左 四 个 方向 上 的 内 
边 距 , 即 从 上 内 边 距 开始 顺 时 针 旋 转 。 同 理 , margin 属性 是 margin-top, margin-right, 
margin-bottom 和 margin-left 的 顺序 集合 ,依次 代表 上 A. F \ 左 四 个 方向 上 的 外 边 距 。 


1.5.4 CSS 定位 


在 HTML 文档 中 ,开发 者 通常 还 需要 决定 一 个 个 元 素 的 具体 位 置 ,进而 可 以 为 网 页 的 
浏览 者 提供 更 好 的 视觉 效果 。 在 CSS 中 通过 设 定 position 属性 ,可 以 对 HTML 元 素 进行 
定位 。 经 常 使 用 的 有 三 种 定位 方式 : 相对 定位 (relative)、 绝 对 定位 (absolute) 和 浮动 
(float), 

1. 相对 定位 et 


1 
通过 设置 position 属性 为 relative, 可 以 使 用 相对 定 ! 
位 。 所 谓 相对 ,是 指 相对 于 元 素 本 应 该 显示 的 位 置 。 i x 

通过 设 定 top sk left 属性 ,可 以 设置 元 素 相 对 于 原来 | 1 
位 置 上 方 或 左 侧 的 距离 ,如 图 1.17 所 示 。 了 u 

需要 注意 的 是 ,在 使 用 相对 定位 方式 时 ,无 论 如 何 移 
动 ,元 素 仍然 占据 原来 的 空间 ,所 以 移动 后 的 元 素 可 能 会 
覆盖 其 他 元 素 内 容 ,请 看 如 下 实例 ,其 在 浏览 器 中 的 展示 
效果 如 图 1. 18 所 示 。 


/ D 相对 定位 html x NI 


c | Q file:///E/HTML5/HTML5/HTMLS5/ 预 备 知识 /相对 定位 .html 


FT , 相对 于 元 素 原 本 显示 的 位 置 进行 位 移 





1.17 相对 定位 图 示 


























1.18 相对 定位 


文件 名 : 相对 定位 . html 


<!DOCTYPE HTML > 
<html lang = "en- US"> 


HTML5 


k — 34 


HTML5 实用 教程 





<head> 
< meta charset = "UTF — 8"> 
<title></title> 


<style> 
pÍ 
position:relative; 
top:25px; 
) 
</style> 
</head> 
< body> 
<p> 
相对 定位 方式 , 相对 于 元 素 原本 显示 的 位 置 进行 位 移 
</p> 
<div style= "width:50px;height:50px; border:3px solid black;"> 
</div> 
</body> 
</html > 


2. 绝对 定位 

通过 设置 position 属性 为 absolute, 可 以 使 用 绝对 定位 。 绝 对 定位 方式 相对 于 被 定位 
元 素 最 近 的 父 级 元 素 , 例 如 两 个 嵌 套 的 < div > 元 素 , 当 使 用 绝对 定位 时 , 嵌 套 在 内 部 的 < div > 
元 素 相 对 于 外 部 的 < div > 元 素 进 行 定 位 。 而 外 部 的 < div > 元 素 则 会 相对 于 < body > 元 素 进 
行 定位 。 绝 对 定位 在 浏览 器 中 的 展示 效果 如 图 1. 19 所 示 。 

文件 名 : 绝对 定位 . html 


<! DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF — 8"> 
«title»«/title» 
«style» 
# parent ( 
width:100px; 
height:100px; 
border: 3px solid black; 
position: absolute; 
top: 30px; 
left: 30px; 
) 
# child( 
width: 100px; 
height: 100px; 
border: 2px dashed black; 
position: absolute; 
top: 30px; 
left: 30px; 


) 
</style> 
</head> 
X body> 
<div id= "parent"» 
<div id= "child"> 
</div> 
</div> 
</body> 
</html> 


D 绝对 定位 html x VÀ 











， C | @ fileWE/HTMLSHTMLS/HTMLS/ 预 备 知 识 / 钨 对 定位 html gx: 
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1 
1 
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图 1.19 绝对 定位 


3. 浮动 


通过 设 定 HTML 元 素 的 float 属性 ,可 以 让 元 素 具有 类 似 于 浮动 的 特性 。 不 同 于 元 素 
被 一 一 顺序 排列 向 下 展开 ,HTML 元 素 之 间 可 以 根据 自身 长 宽大 小 向 上 浮动 。 请 看 如 下 实 


例 , 其 在 浏览 器 中 的 展示 效果 如 图 1. 20 所 示 。 
文件 名 : 浮动 . html 


«! DOCTYPE HTML > 
<html lang = "en — US"> 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 
< style» 
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. £loatDiv( 
width:100px; 
height:100px; 
border:3px solid black; 
margin:10px 10px 10px 10px; 
float:left; 
} 
</style> 
</head> 
< body> 
< div class = "floatDiv"></div > 
< div class = "floatDiv"></div > 
< div class = "floatDiv"></div > 











</body> 
</html> 
DEEE) 
Jomm ——— x Ven 
e | Q fileV/WEVHTMLSVHTMLSVHTML5/ 预 备 知识 /浮动 html 图 x 








L 














1.20 浮动 


如 果 将 代码 中 的 float 属性 去 掉 ,实例 中 的 小 方块 将 由 上 而 下 显示 , 即 每 个 元 素 占 据 一 
行 空间 ,如 图 1. 21 所 示 。 

当然 浮动 属性 有 时 也 会 造成 一 定 烦 恼 ,尤其 当 一 个 HTML 文档 中 还 有 其 他 非 浮动 
元 素 同时 存在 时 。 因 为 浮动 定位 的 方式 使 浮动 元 素 脱离 了 文档 流 ,浮动 元 素 本 身 并 不 
占据 空间 ,这 就 导致 非 浮 动 元 素 照 常 显示 ,仿佛 不 存在 这 些 浮 动 元 素 一 样 , 如 图 1. 22 
所 示 。 


D 浮动 html 








€ > Q | OfileWEVHTMLSHTMLS/HTMLS/ 预 各 知识 /浮动 html 图 ox 
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D clear 尾 性 .html 








图 1.21 没有 浮动 





x VÀ 








< > C | OfileWEVHTMLS/HTMLS/HTMLS/ 预 备 知 识 /clear 属 性 html 











图 1.22 没有 clear 属性 章 
HTMLS 
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为 了 避免 这 种 情况 ,我 们 需要 为 非 浮 动 元 素 添 加 clear 属性 ,以 消除 浮动 元 素 带 来 的 影 

Wi], clear 属性 的 值 可 以 设置 为 left\right 或 both, 即 左 侧 、 右 侧 或 两 侧 不 允许 存在 浮动 元 

| RAE, HTML 文档 中 的 非 浮动 元 素 就 不 会 受到 浮动 元 素 的 影响 ,进而 造成 显示 问题 。 具 

O 体 情 况 可 参考 如 下 实例 ,其 在 浏览 器 中 的 展示 效果 如 图 1. 23 所 示 ,读者 可 对 比 不 加 clear 属 
性 的 效果 。 


D clear 尾 性 .html 

















文件 名 : clear 属性 . html 


<! DOCTYPE HTML > 
<html lang = "en - US"> 
<head> 
< meta charset = "UTF - 8"> 
<title></title> 
«style» 
.floatDiv{ 
width:100px; 
height:100px; 
border:3px solid black; 
margin:l0px 10px 10px 10px; 
float:left; 
} 
#noFloat{ 
width:200px; 


height:200px; 
border:3px solid black; 
margin:10px 10px 10px 10px; 
background - color: # C0C0C0; 
clear:both; 
} 
</style> 
</head> 
< body> 
< div class = "floatDiv"></div > 
< div class = "floatDiv"></div > 
< div class = "floatDiv"></div > 
<div id= "noFloat"></div> 
</body> 
</html> 


1.5.5 CSS3 


CSS3 是 最 新 的 CSS 标准 , 它 是 之 前 CSS 技术 的 升级 版 本 ,并 对 之 前 的 CSS 兼容 。 
CSS3 语言 开发 是 朝 着 模块 化 方向 发 展 的 。 以 前 的 规范 作为 一 个 模块 实在 是 太 庞大 而 且 比 
较 复 杂 , 所 以 把 它 分 解 为 一 些小 的 模块 ,更 多 新 的 模块 也 被 加 入 进来 。 这 些 模 块 包 括 盒 模 
型 列表 模块 . 超 链 接 方式 .语言 模块 .背景 和 边框 ,文字 特效 多 栏 布局 等 。CSS3 也 是 十 分 
重要 的 Web 技术 ,有 兴趣 的 读者 可 以 自行 搜索 学 习 CSS3 的 相关 知识 。 


1.6 JavaScript 


JavaScript 是 目前 Web J^ i2 (E HAS EAS TÉ Pi + BEI F 48 Fd 92S JI CREE Gnd pk t: 
设计 、 验 证 表单 检测 浏 览 器 、 创 建 cookies 等 。 它 是 一 种 轻 量 级 的 编程 语言 ,易于 学 习 。 由 
于 互联 网 的 广泛 应 用 ,JavaScript 可 以 说 是 世界 上 最 流行 的 编程 语言 之 一 。 


1.6.1 JavaScript 的 历史 


1995 年 ,在 网 景 公 司 就 职 的 布 兰 登 。 艾 克 为 Netscape Navigator 2. 0 浏览 器 开发 了 一 
种 名 为 LiveScript 的 脚本 语言 ,后 来 网 景 公 司 与 异 阳 电脑 公司 组 成 的 开发 联盟 为 了 让 这 一 
语言 显得 更 为 高 级 优越 , 便 套 上 了 “Java” 这 一 单词 .将 其 改名 为 “JavaScript”, 日 后 这 成 为 大 
众 对 这 一 语言 产生 诸多 误解 的 原因 之 一 。 实 际 上 ,JavaScript 与 Java 无 论 是 在 设计 上 还 是 
概念 上 都 完全 不 同 ,它们 本 质 上 并 没有 任何 关系 ,唯一 的 联系 就 是 名 字 里 都 有 “Java”。 

JavaScript 推出 后 在 浏览 器 上 大 获 成 功 ,微软 公司 在 不 久 后 就 为 Internet Explorer 3. 0 
浏览 器 推出 了 JScript. 以 与 处 于 市 场 领导 地 位 的 网 景 产品 同 台 竞争 。JScript 也 是 一 种 
JavaScript 实现 ,这 两 个 JavaScript 语言 版 本 在 浏览 器 端 共存 意味 着 语言 标准 化 的 缺失 ,对 
这 一 语言 进行 标准 化 的 工作 被 提 上 了 日 程 。1997 年 ,由 网 景 . 异 阳 、 微 软 、 宝 蓝 等 公司 组 织 
及 个 人 组 成 的 技术 委员 会 在 ECMA (欧洲 计 算 机 制造 商 协会 ) 确 定 定义 了 一 种 名 叫 
ECMAScript 的 新 脚本 语言 标准 ,规范 名 为 ECMA-262, JavaScript 成 为 ECMAScript 的 实 
现 之 一 ,或 者 说 JavaScript 的 官方 名 称 为 ECMAScript。 
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1.6.2 JavaScript 的 将 点 


一 般 来 说 ,完整 的 JavaScript 包括 以 下 三 部 分 : 

* ECMAScript, 描 述 了 该 语言 的 语法 和 基本 对 象 。 

。 文档 对 象 模型 (Document Object Model) ,描述 处 理 网 页 内 容 的 方法 和 接口 。 
° 浏览 器 对 象 模型 (Browser Object Model ,描述 与 浏览 器 进行 交互 的 方法 和 接口 。 
JavaScript 的 基本 特点 如 下 : 

。 轻 量 级 。 

。 动态 化 。 

° 解释 性 脚本 语言 。 

。 能 够 为 HTML 页 面 添加 交互 行为 。 

。 可 直接 写 人 HTML 文档 ,也 可 与 之 分 离 。 

JavaScript 常见 用 途 : 

。 对 浏览 器 事件 作出 响应 。 

。 读 写 HTML 元 素 。 

。 验证 所 要 上 传 至 服务 器 的 数据 。 

。 检测 访客 的 浏览 器 信息 。 

。 控制 cookies ,包括 创 建 和 修改 等 。 


1.6.3 JavaScript 引 用 方法 


为 一 个 HTML 文档 添加 JavaScript 代码 ,有 内 部 引用 和 外 部 引用 两 种 方式 。 

1. 内 部 引用 

所 谓 内 部 引用 ,就 是 在 HTML 内 编写 JavaScript 代码 ,用 < script > 标签 来 添加 
JavaScript 代码 。 具 体 如 下 ,实例 在 浏览 器 中 的 展示 效果 如 图 1. 24 所 示 。 

文件 名 : JavaScript 内 部 引用 . html 


<! DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF - 8"> 
<title></title> 
</head> 
<body> 
<script> 
alert("Hello World"); 
</script> 
</body> 
</html> 





对 于 内 部 引用 方式 ,开发 者 可 以 在 一 个 HTML 文档 中 添加 任意 多 个 < script > 标签 , 然 
而 ,添加 < script > 的 方式 通常 还 分 为 两 种 : 一 种 是 在 < head > 标签 内 添加 , 另 一 种 是 在 
<body > 标签 内 添加 ,二 者 可 以 同时 存在 。 具 体 来 说 ,将 JavaScript 代码 置 于 < head > 标签 
内 , 它 会 在 被 调用 的 时 候 执行 。 将 JavaScript 代码 置 于 < body > 标签 内 , 它 会 在 页 面 加 载 的 
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图 1.24 JavaScript 内 部 引用 


时 候 被 立即 执行 。 开 发 者 需要 根据 自己 的 需要 进行 取舍 。 另 外 ,浏览 器 是 自 上 而 下 解析 
HTML 文档 的 ,如 果 将 JavaScript 代码 置 于 < head > 标签 内 ,可 以 保证 脚本 在 任何 调用 之 前 被 
加 载 ,但 同时 它 又 会 先 于 网 页 主体 内 容 加 载 ,在 网 络 状况 不 好 的 时 候 , 可 能 会 影响 用 户 体验 。 
所 以 ,开发 者 也 经 常 将 JavaScript 代码 置 于 < body > 标签 的 最 尾部 ,优先 加 载 网 页 主要 内 容 。 

2. 外 部 引用 

不 同 于 内 部 引用 ,外 部 引用 方式 将 JavaScript 代码 与 HTML 文档 分 离 。 为 插入 页 面 的 
< script > 标签 添加 src 属性 ,指定 相关 JavaScript 代码 的 URL 即 可 ,其 中 JavaScript 文件 的 
扩展 名 为 .js。 具 体 的 使 用 方式 如 下 面 这 个 实例 ,其 在 浏览 器 中 的 展示 效果 如 图 1. 25 所 示 。 

文件 名 : JavaScript 外 部 引用 . html 


<! DOCTYPE HTML > 
<html lang = "en — US"> 
<head> 
< meta charset = "UTF - 8"> 
«title»«/title» 
</head> 
<body> 
< script src = "myScript. js"> 
</script> 
</body> 
</html> 
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文件 名 : myScript. js 


alert("Hello World"); 
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图 1.25 JavaScript 外 部 引用 


一 般 来 说 ,使 用 外 部 引用 JavaScript 代码 有 以 下 两 个 优点 : 

。 将 JavaScript 代码 与 HTML 代码 分 离 , 增 加 了 HTML 代码 和 JavaScript 代码 的 可 
读 性 。 

。 浏览 器 通常 会 单独 缓存 一 些 网 页 的 JavaScript 文件 ,以 便 加 快 页 面 再 次 加 载 的 
速度 。 


1.6.4 JavaScript 语法 


接 下 来 简单 介绍 JavaScript 的 基本 语法 。 

1. JavaScript 语句 

计算 机 程序 可 以 被 视 为 一 系列 可 被 计算 机 执行 的 指令 (instructions) ,具体 到 一 种 高 级 
编程 语言 ,抽象 的 被 执行 的 指令 是 请 句 (statement)。 

JavaScript 是 一 种 高 级 编程 语言 ,其 语句 的 形式 如 下 ,每 条 语句 约定 以 分 号 "; ”分 制 。 

alert("Hello World"); 

var x = 10; 

document. getElementById("myDiv"); 

2. JavaScript 变量 

在 编程 语言 中 ,变量 (variables) 是 存储 信息 的 容器 。 


JavaScript 的 变量 通常 是 动态 数据 类 型 的 , 它 可 以 承载 多 种 类 型 的 数据 ,包括 布尔 类 
型 .数值 .字符 串 、 对 象 等 ,通常 使 用 "var" 来 声明 一 个 变量 ,并 使 用 等 号 “一 "来 进行 变量 的 赋 
值 。 具 体 使 用 如 下 。 


var x, y, z; 
var x = 10; 
vara - true; 
在 这 里 需要 注意 以 下 几 点 : 
变量 应 该 以 字母 开头 ,但 也 能 以 $ 和 _ 符 号 开头 (一 般 不 推荐 ) 。 
。 变量 名 称 对 大 小 写 敏 感 。 
JavaScript 变量 名 ,一 般 约定 为 小 驼峰 命名 法 , 即 变量 名 由 一 组 英文 单词 组 成 ,第 一 
个 单词 为 小 写 , 之 后 的 单词 首 字母 大 写 , 如 ”var thatlsMyVariable; ”, 就 像 驼 峰 一 
样 高 低 错落 。 
° 变量 命名 不 宜 过 长 ,最 好 具有 实际 意义 ,便于 使 用 和 维护 。 
不 可 以 使 用 JavaScript 关键 字 作 为 变量 命名 ,如 var、break、while 等 。 

3. JavaScript 数组 

数组 (array) 是 JavaScript 变量 支持 的 一 种 数据 类 型 。 它 表示 一 组 数据 ,可 以 通过 索引 
的 方式 被 快速 访问 。 

一 般 来 说 ,JavaScript 数组 有 两 种 声明 和 赋值 方式 。 一 种 为 先 声明 ,再 通过 索引 赋 
值 ,如 : 

var languages = new Array(); 

languages[0] = "Java"; 


languages[1] = "Python" 
languages[2] = "Ruby"; 


另 一 种 是 直接 声明 并 赋值 ,如 : 


var languages = ["Java", "Python", "Ruby"]; 
或 者 
var languages = new Array("Java", "Python", "Ruby"); 


当 需 要 对 数组 内 的 值 进行 访问 时 ,只 需 以 变量 名 加 中 括号 索引 即 可 ,需要 注意 的 是 , 数 
组 的 索引 以 0 作为 开始 ,而 不 是 1, 如: 


languages[0] = "PHP"; 


4. JavaScript 对 象 

1) 对 象 

JavaScript 语言 中 对 象 无 处 不 在 , 它 的 字符 串 数字、 数组 .日 期 等 数据 类 型 本 质 上 都 是 
对 象 。 所 谓 对 象 (Object) ,更 多 的 是 来 自 现实 的 一 种 抽象 ,在 现实 生活 中 ,我 们 描述 一 个 事 
物 时 ,会 描述 这 个 事物 的 许多 属性 ,而 不 会 只 用 一 个 数值 将 其 代替 。 在 编程 语言 中 ,也 是 如 
此 ,单纯 的 变量 赋值 难以 满足 对 现实 的 模拟 ,所 以 我 们 需要 对 象 。 

一 个 对 象 包含 其 本 身 的 属性 和 方法 ,以 一 个 汽车 为 例 ,假如 我 们 要 描述 汽车 这 一 对 
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象 。 我 们 会 描述 它 的 一 些 属性 ,如 品牌 、 材 质 、 类 型 .颜色 等 ,在 JavaScript 对 象 的 概念 中 ， 
它们 可 以 被 统称 为 属性 (properties) 。 同 时 ,我 们 还 会 描述 这 个 车 子 的 一 些 功能 ,如 加 速 、 
刹车 、 播 放 音乐 .打开 空调 等 ,在 JavaScript 对 象 的 概念 中 ,这 些 功用 可 以 被 统称 为 方法 
(methods) 。 

2) 声明 

在 JavaScript 中 ,一 般 可 以 使 用 两 类 方式 进行 JavaScript 对 象 的 声明 。 一 种 是 先 创建 
一 个 Object 对 象 ,再 为 其 添加 属性 值 , 如 : 


var cat = new Object(); 
cat.name - "Ton"; 
cat.owner - "Jerry"; 
cat.age 7 3; 


另 一 种 是 直接 使 用 大 括号 进行 对 象 的 创建 ,如 : 


var cat = {fname:"Tom"  owner:"Jerry",age:3); 


当然 ,为 了 代码 的 可 读 性 ,JavaScript 对 象 的 声明 可 以 以 如 下 多 行 的 形式 完成 ,需要 注 
意 对 象 的 最 后 一 个 属性 后 没有 逗号 , 且 大 括号 外 要 有 分 号 。 如 : 


var cat = ( 
name: "Tom", 
owner:"Jerry", 
age:3 

}; 


类 似 地 ,也 可 以 为 对 象 添加 方法 ,如 : 


var cat = ( 
name: "Tom", 
owner:"Jerry", 
age:3, 
sayHi:function()( 

alert("Hello World"); 

) 

}; 

3) 访问 

在 代码 中 ,可 以 对 所 创建 的 对 象 进行 属性 的 访问 或 者 方法 的 调用 ,也 可 以 使 用 “. "或 索 

引 形 式 进行 属性 的 访问 ,如 : 


cat.age = 4; 
cat["owner"] = "Mark"; 


可 以 使 用 “. ”运算 符 直接 进行 方法 的 调用 。 
cat. sayHi(); 


5. JavaScript 注释 
在 JavaScript 代码 中 ,类 似 于 之 前 的 HTML 文档 .CSS 文档 ,为 了 便于 代码 的 维护 , 开 


发 者 可 以 为 代码 添加 注释 ,它们 虽 是 文档 的 一 部 分 但 不 会 被 浏览 器 解析 执行 ,而 是 直接 被 忽 
略 。 我 们 可 以 使 用 “//” 添 加 单行 注释 ,使 用 “/ < ”作为 开始 “* /作为 结束 添加 多 行 注释 ， 
具体 使 用 方式 如 下 : 


alert("Hello World"); 

// 我 是 单行 注释 

/* 
RESTER, 
我 们 都 不 会 被 解释 执行 
而 是 直接 被 忽略 

*/ 


6. JavaScript 算术 和 赋值 运算 符 
在 编程 语言 中 ,通过 运算 符 对 程序 中 的 变量 进行 计算 ,一般 分 为 算术 运算 符 和 赋值 运算 
符 ,JavaScript 的 运算 符 规则 如 表 1.1 和 表 1. 2 所 示 。 
























































表 1.1 算术 运算 符 
运算 符 d jË 例 子 x 运算 结果 y 初 值 
加 法 x-yt2 5 
减法 x 一 y 一 2 5 
乘法 x 一 yx 2 5 
除法 x=y/2 2 4 
% 取 模 (余数 ) x=y%2 1 5 
x=++y 6 5 
id 自 增 x 一 y 十 十 5 5 
E xe——y 4 5 
Am x—y—-— 5 5 
表 1.2 赋值 运算 符 
运算 符 例 子 等 FJ 于 x V fü y 初 值 运算 结果 
= x=y 0 5 x=5 
+= xt-y x—xty 1 5 x 一 6 
ky. mary 2 1 xl 
*= x* =y x—x*y 3 4 x—12 
/= x/=y x=x/y 4 2 x=2 
%= x%=y x=x%y 5 2 x=1 

















7. JavaScript IEEERBZ fia SF £F 

JavaScript 的 比较 运算 符 用 来 比较 两 个 变量 的 值 和 类 型 的 关系 ,如 比较 大 小 .比较 是 否 
相等 。 而 JavaScript 的 逻辑 运算 符 则 用 来 逻辑 组 合 多 个 比较 ,判断 其 中 至 少 有 一 个 比较 结 
果 成 立 ,还 是 所 有 比较 结果 都 成 立 ,等 等 。 无 论 是 单个 比较 还 是 多 个 比较 的 组 合 ,它们 的 最 
终 返 回 值 均 为 布尔 类 型 , 即 true 或 false, JavaScript 比较 和 逻辑 运算 符 规 则 如 表 1. 3 和 
表 1.4 所 示 。 

在 表 1. 3 中 ,约定 “x 一 5? 成 立 。 
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表 1.3 比较 运算 符 
运算 符 d 34k 比较 返回 值 
等 于 false 
true 
ALS T CHOROS RI false 
均 相 等 ) true 
!= 不 等 于 ! true 
不 绝对 等 于 ( 值 和 类 型 有 xl! 一 一 "5" true 
(== 一 个 不 相等 ,或 两 个 都 
不 相等 ) web false 
大 于 x>8 false 
< 小 于 x<8 true 
>= 大 于 或 等 于 x>=8 false 
<= 小 于 或 等 于 x<=8 true 
EK 1.4 中 ,约定 “x 一 6" 和 "”"y 一 3 成 立 。 
表 1.4 逻辑 运算 符 
运算 符 d xk 5 + 结 果 
8.8. and (x«10 &8.y > 1) true 
lI or (x==5 || y2 75 false 
! not ! (x==y) true 








8. JavaScript 条 件 语句 

在 编程 语言 中 ,条 件 (conditions) 语 句 是 用 来 判断 给 定 的 条 件 是 否 满足 ,并 根据 判断 的 
结果 ( 真 或 假 ) 决 定 执行 的 语句 。 在 JavaScript 中 ,经 常 采用 的 有 如 下 四 种 条 件 语句 结构 , 它 
们 分 别 是 让 语句 、if…else 语句 .if…else if…if 语句 和 switch 语句 。 


1) ifi] 
只 有 当 指定 条 件 为 true 时 , 才 使 用 该 语句 来 执行 相应 代码 。 
< script > 
var today = "星期 天 "; // 设 置 今天 为 星期 天 


if (today == "ERU X" || today == "星期 六 "){ // 当 今天 是 星期 天 或 星期 六 的 条 件 成 立 
alert(" 今 天 可 以 休息 !"); 
i 


</script> 
2) if…else 语句 
当 条 件 为 true 时 执行 代码 , 当 条 件 为 false 时 执行 else 后 代码 块 内 的 代码 。 


«script» 
var today = "星期 一 "; // 设 置 今天 为 星期 一 
if (today == "星期 天 ”| | today == "星期 六 "){ // 当 今天 是 星期 天 或 星期 六 的 条 件 成 立 
alert(" 今 天 可 以 休息 !"); 
}else{ // 若 上 述 条 件 不 成 立 
alert(" 今 天 还 要 上 学 ……"); 


} 


</script > 
3) if…else if if 4J 
使 用 该 语句 选择 多 个 代码 块 之 一 来 执行 ,实现 逐 层 条 件 判断 。 


< script> 
var today = "星期 一 "7 // 设 置 今天 为 星期 一 
var isHoliday = true; // 设 置 今 天 为 假日 


if (today == "星期天" || today == "星期 六 "){  // 当 今天 是 星期 天 或 星期 六 的 条 件 成 立 
alert(" 今 天 可 以 休息 !"); 


Jelse if (isHoliday){ // 当 今天 是 假日 条 件 成 立 
alert(" 今 天 还 是 能 休息 !"); 
Jelse( // 若 上 述 条 件 不 成 立 


alert(" 今 天 还 要 上 学 ……"); 
} 
«/script» 
4) switch 语句 
使 用 该 语句 来 选择 多 个 代码 块 之 一 来 执行 ,需要 注意 其 中 的 break 语句 的 使 用 。break 
语句 的 作用 是 跳出 switch 语句 ,否则 程序 将 继续 向 下 进行 判断 ,即便 当前 条 件 已 被 满足 。 
default 表示 默认 情况 , 即 上 述 case 中 所 描述 的 情况 都 不 满足 时 ,所 要 执行 的 代码 。 


<script> 
var today = "星期 一 "; // 设 置 今天 为 星期 一 
switch( today) // 对 today 进行 多 条 件 判 断 
{ 
case "星期 六 ": // 一 种 情况 ,判断 是 否 为 周 六 
alert(" 今 天 是 周 六 ,可 以 休息 "); 
break; 
case "星期 日 ": // 一 种 情况 ,判断 是 否 为 周 日 
alert(" 今 天 是 周 日 ,可 以 休息 "); 
break; 
default: // 默 认 情 况 , 上 述 情况 都 不 满足 执行 的 代码 
alert(" 今 天 既 不 是 周 六 ,也 不 是 周 日 ,还 是 上 学 去 吧 "); 
} 
</script> 


9. JavaScript 循环 语句 

在 编程 语言 中 ,循环 (loop) 语 句 用 于 可 控 地 重复 执行 代码 逻辑 ,JavaScript 语言 提供 了 
四 种 循环 模式 ,它们 分 别 是 for 循环 、for/in 循环 、while 循环 和 do/ while 循环 。 同 时 ,还 可 
以 使 用 break 语句 和 continue 语句 来 实现 对 循环 过 程 的 控制 。 

1) for 循环 

该 循环 用 于 将 代码 块 执行 一 定 的 次 数 。for 循环 的 语法 形式 如 下 : 

for (语句 1; 语句 2; 语句 3) 

{ 


被 执行 的 代码 块 
j 
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其 中 ,语句 1 在 循环 (代码 块 ) 开 始 前 执行 ,语句 2 定义 运行 循环 (代码 块 ) 的 条 件 , 语 句 3 在 
循环 (代码 块 ) 已 被 执行 之 后 执行 。 下 面 这 个 例子 ,计算 了 1 一 10 的 相 加 之 和 。 


< script > 
var sum = 0; 
for (var i=1;i<=10;i++){ 
Sum += i; 
1 
alert(sum); 


</script> 


2) for/in 循环 
该 循环 用 于 遍历 对 象 的 属性 。 该 类 型 循环 的 使 用 方式 如 下 ,其 中 x 的 作用 是 用 于 指 代 
遍历 过 程 中 不 确定 的 索引 值 。 


< script > 
var cat = (name:"Tom",owner:"Jerry",age:3); 
var x; 
for(x in cat)( 
alert(cat[x]); 
i 


</script> 


3) while 循环 
该 循环 在 指定 的 条 件 为 true 时 循环 指定 的 代码 块 。while 循环 的 语法 如 下 : 


while (条 件 ){ 
需要 执行 的 代码 
1 


下 面 用 while 循环 实现 计算 1 一 10 的 和 来 作为 例子 。 


«script» 
var i-1,sum-0; 
while (i<= 10){ 
sum += i; 
i++; 
} 
alert(sum); 
</script> 


4) do- while 循环 

类 似 于 while 循环 ,在 指定 的 条 件 为 true 时 循环 指定 的 代码 块 。 与 单纯 的 while 循环 
不 同 的 是 ,该 语句 保证 do 后 的 代码 块 至 少 被 执行 一 次 。 而 在 while 循环 中 ,可 能 由 于 一 开 
始 循环 条 件 不 满足 而 while 后 代码 块 一 遍 都 不 会 执行 。do…while 循环 的 语法 形式 如 下 : 

dof 


需要 执行 的 代码 
jwhile( 条 件 ); 


5) break 语句 
break 语句 用 于 跳出 当前 循环 。break 语句 跳出 循环 后 ,会 继续 执行 该 循环 之 后 的 代 


码 , 具 体例 子 如 下 : 


«script» 
var i-1l,sum- 0; 
while (i<= 10)( 
sum += i; 
if(i == 5){ 
alert(" 程 序 循环 到 5 的 时 候 就 罢工 了 ,凑合 用 吧 "); 
break; 
} 
itt; 
) 


</script> 


6) continue 语句 


continue 语句 用 于 跳 过 循环 中 的 一 个 迭代 。 即 当 程 序 执行 到 continue 语句 时 ,程序 就 
停止 执行 所 需 循环 的 代码 块 的 剩余 部 分 ,并 直接 进入 下 一 次 循环 。 
< Script> 


var i=1,sum= 0; 
while (i<=10){ 


if(i == 5){ 
alert(" 程 序 偷懒 了 ,就 没有 加 5, 直接 跳 到 了 6"); 
itt; 
continue; 

} 

sum += i; 

itt; 

) 
«/script» 


10. JavaScript 函数 

在 编程 语言 中 ,函数 是 指 由 事件 驱动 的 或 者 被 调用 时 执行 的 可 重复 使 用 的 代码 块 。 我 
们 将 一 系列 语句 封装 成 函数 ,以 便 之 后 编程 时 更 方便 地 重复 使 用 。JavaScript 的 函数 语法 
形式 如 下 , 它 可 以 有 多 个 参数 ,也 可 以 没有 参数 。 同 时 , 它 还 可 以 有 返回 值 。 


function 函数 名 (参数 1, 参 数 2, 参数 3,...)( 
这 里 是 要 执行 的 代码 
return 所 要 返回 的 值 

) 


需要 注意 的 是 ,JavaScript 中 的 函数 参数 不 需要 指定 数据 类 型 ,直接 指定 变量 命名 即 
可 。 下 面 这 个 简单 实例 ,使 用 函数 实现 了 加 法 。 


<script> 
function add(x, y) ( 
return x + y; 
) 
var sum = add(1,1); 
alert(sum); 
«/script» 
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11. JavaScript 局 部 变量 和 全 局 变量 

在 JavaScript 函数 内 部 声明 的 变量 是 局 部 变量 ,所 以 只 能 在 函数 内 部 访问 它 。 我 们 可 
以 在 不 同 的 函数 中 使 用 名 称 相同 的 局 部 变量 ,因为 只 有 声明 过 该 变量 的 函数 才能 识别 出 该 
变量 ,只 要 函数 运行 完毕 ,本 地 变量 就 会 被 删除 。 在 函数 外 声明 的 变量 是 全 局 变量 ,不 同 于 
局 部 变量 ,网 页 上 的 所 有 脚本 和 函数 都 能 访问 它 , 全 局 变量 会 在 页 面 关闭 后 被 删除 。 


1.6.5 JavaScript DOM 


JavaScript 语言 可 以 为 HTML 文档 添加 交互 逻辑 ,其 主要 通过 操作 HTML 的 文档 对 
象 模型 (DOMD) 来 实现 。 具 体 到 JavaScript 代码 上 ,这 样 的 交互 主要 依赖 于 使 用 document 
对 象 , 即 可 被 JavaScript 代码 使 用 的 DOM 的 抽象 。 接 下 来 从 以 下 四 个 方面 来 简单 地 了 解 。 

1. 访问 HTML 元 素 

一 般 来 说 ,使 用 document 对 象 下 的 getElementById() 方 法 来 实现 根据 HTML 元 素 的 
id 来 访问 元 素 。 另 外 ,也 经 常会 使 用 getElementsByTagName() 方 法 (根据 HTML 元 素 标 
签名 ) ,以 及 getElementsByClassName() 方 法 (根据 HTML 元 素 的 class)。 需 要 注意 的 是 ， 
通过 id 所 访问 到 的 元 素 是 单个 HTML 元 素 ,而 通过 标签 名 或 类 名 所 访问 到 的 通常 是 由 
HTML 元 素 所 组 成 的 数组 。 下 面 这 个 实例 通过 使 用 document 对 象 下 的 getElementById() 
方法 实现 了 HTML 元 素 的 访问 ,该 方法 只 需 传人 所 要 获取 的 HTML 元 素 id 即 可 。 该 实例 
在 浏览 器 中 的 展示 效果 如 图 1. 26 所 示 。 


N 访问 HTML 元 素 html x Vos 
> x | © fileW/EVHTMLS/HTMLS/HTML5/ 预 备 知识 /访问 HTML 元 素 html 











此 网 页 显示 : 
这 是 一 个 段落 





1.26 访问 HTML 元 素 


文件 名 : 访问 HTML 元 素 . html 


<!DOCTYPE HTML > 


<html lang = "en- US" 
<head> 
< meta charset = "UTF — 8"> 
«title»«/title» 
</head> 
<body> 
<p id= "myPara"> 这 是 一 个 段落 </p> 
<script> 
var x = document. getElementById("myPara"); 
alert(x. innerHTML); 
</script> 
</body> 
</html> 


2. 为 HTML 元 素 添 加 事件 

为 了 能 够 实现 动态 地 与 HTML 元 素 交 互 JavaScript 可 以 为 HTML 元 素 添加 相关 的 
事件 (event) ,并 在 相关 事件 被 触发 时 调用 相应 的 处 理 函 数 。 具 体能 够 为 HTML 元 素 添加 
的 事件 有 许多 种 ,此 处 不 再 袭 述 ,只 提供 一 个 大 概 的 使 用 方式 ,在 之 后 的 学 习 过 程 中 ,读者 会 
过 到 其 他 事件 。 下 面 以 一 个 按钮 添加 单 击 事件 为 例 进行 简要 介绍 ,该 实例 在 浏览 器 中 的 展 
示 效 果 如 图 1. 27 所 示 。 


/ D 为 HTML 元 素 添加 事件 htm| x CS 


(ou | © filey//E/HTMLS/HTMLS/HTMLS/ 预 备 知识 /为 HTML 元 素 添 加 事 .… 图 *| i 


不 要 点 此 网 页 显示 : 
都 说 了 别 点 ,怎么 还 点 























X 











图 1.27 为 HTML 元 素 添 加 事件 


文件 名 : HTML 元 素 添 加 事件 . html 
<! DOCTYPE HTML > 


<html lang = "en- US" 
<head> 
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«meta charset = "UTF — 8"> 
«title»«/title» 
</head> 
< body> 
< button id = "myButton"> 不 要 点 </button> 
«script» 
var btn = document. getElementById("myButton"); 
btn. addEventListener("click", showText) ; 
//btn.onclick = showText; 
function showText()( 
alert(" 都 说 了 别 点 ,怎么 还 点 "); 
} 
</script> 
</body> 
</html> 


除了 使 用 addEventListener() 方 法 外 ,还 可 以 直接 设置 元 素 的 onclick 属性 ,指定 事件 
处 理 函 数 , 或 者 ,也 可 以 直接 在 HTML 元 素 标签 内 进行 onclick 属性 的 设 定 。 这 些 方式 都 
可 以 为 HTML 元 素 添加 事件 。 

3. 改变 HTML 元 素 内 容 与 样式 

访问 到 HTML J Z Ji ,就 可 以 使 用 JavaScript 为 HTML 元 素 动 态 地 设置 内 容 与 样 
式 , 只 需 改 变 被 选中 的 HTML 元 素 的 innerHTML 和 style 属性 即 可 。 下 面 这 个 例子 就 是 
利用 JavaScript 实现 了 HTML 元 素 的 内 容 与 属性 的 改变 。 实 例 中 原本 有 一 段落 ,在 单 击 按 
钮 后 触发 单 击 事件 ,进而 调用 相应 的 事件 处 理 函 数 , 改 变 了 元 素 的 内 容 与 样式 。 该 实例 在 济 
览 器 中 的 展示 效果 如 图 1. 28 和 图 1.29 所 示 。 


/ D 改变 HTML 元 素 内 容 与 样式 x VO 


^c | Q fileVWEVHTMLSHTMLS/VHTML5/ 预 备 知识 /改变 HTML 元 素 内容 .… 




















这 原本 是 一 个 不 同 的 段落 
改变 HTML 元 素 内 容 与 样式 




















图 1.28 改变 HTML 元 素 内 容 与 样式 单 击 前 





D mERHTMUXEUSEUSHEA x COS 
- C | O fleWE/VHTMLS/HTMLS/HTML5/ 预 备 知 识 /改变 HTML 元 素 内 容 .， 图 r) i 














看 ， 文 字 变 大 了 














图 1.29 改变 HTML 元 素 内 容 与 样式 单 击 后 


文件 名 : 改变 HTML 元 素 内 容 与 样式 . html 


<!DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< neta charset = "UTF - 8"> 
«title»«/title» 
</head> 
<body> 
<p id= "myPara"> 这 原本 是 一 个 不 同 的 段落 </p> 
< button onclick = "changeText()"> 改 变 HTML 元 素 内 容 与 样式 </button> 
< script> 
var p = document.getElementById("myPara"); 
function changeText() ( 
p.innerHTML = "看 ,文字 变 大 了 "; 
p. style. fontSize = "40px"; 
} 
</script > 
</body> 
</html> 


4. 动态 添加 和 删除 HTML 元 素 
除了 改变 HTML 文档 中 已 存在 的 元 素 的 内 容 与 样式 外 ,JavaScript 还 可 以 对 HTML | x 


— 
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文档 内 的 元 素 进 行动 态 的 添加 和 删除 。 在 JavaScript 的 DOM 添加 和 删除 相关 方法 中 , 需 
要 注意 的 是 ,在 进行 添加 和 删除 前 ,都 需要 先 获取 所 要 添加 或 删除 元 素 的 父 元 素 。 下 面 的 这 
个 例子 将 通过 两 个 按钮 ,实现 动态 地 添加 和 删除 HTML 元 素 。 该 实例 在 浏览 器 中 的 展示 


效果 如 图 1.30 所 示 。 


WeB ¥ J 


D asama x COS 

， C | © fileWE/HTMLSVHTMLS/HTMLS5/ 预 备 知识 /动态 添加 和 删除 HTM.， 困 w | i 
这 是 新 添加 的 段落 。。。 
这 是 新 添加 的 段落 。。。 
































1.30 动态 添加 和 删除 HTML 元 素 


文件 名 : 动态 添加 和 删除 HTML 元 素 . html 


«! DOCTYPE HTML > 
< html lang = "en - US"> 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
<div id= "myDiv"> 
<p id= "myPara"> 一 点 按钮 这 段 将 会 被 删除 </p> 
< button onclick = "deleteElem( ) "> 删除 段落 </button > 
< button onclick = "createElem() "> 添加 新 段落 </button > 
</div> 
<script> 
var p = document. getElementById("myPara"); 
var parent = document.getElementById("myDiv"); 


function deleteElem()( 
parent. removeChild(p); 
) 
function createElem()( 
var newPara = document. createElement("p"); 
var node = document. createTextNode(" 这 是 新 添加 的 段落 ..."); 
newPara. appendChild(node); 
parent. appendChild(newPara); 
) 


</script> 
</body> 
</html> 
在 这 个 实例 中 ,调用 了 document 对 象 的 removeChild() 方 法 ,通过 父 元 素 实 现 了 对 其 
子 元 素 的 删除 。 另 外 ,还 调用 了 document 对 象 的 createElement() 方 法 对 新 的 元 素 进行 创 
建 ,并 同时 调用 了 createTextNode() 方 法 完成 对 新 文字 节点 的 创建 。 最 后 通过 appendChild() 
方法 ,将 文字 节点 依附 到 新 创建 的 元 素 上 ,再 将 新 创建 的 元 素 依附 到 选中 的 父 节 点 下 。 


1.7 代码 编辑 器 


在 HTML5 的 学 习 过 程 中 ,会 不 断 接触 到 HTML XE, CSS 文档 和 JavaScript 文档 。 
在 计算 机 上 办 公 写 作 时 会 使 用 到 文字 编辑 软件 ,如 Word, WPS 等 ,让 编写 的 过 程 更 为 直观 
和 人 性 化 。 类 似 地 ,编写 代码 也 可 以 使 用 人 性 化 的 方式 ,不 必 再 像 早期 程序 员 一 样 盯 着 屏幕 
上 的 小 黑 窗 了 。 编 写 代 码 本 质 上 就 是 编写 一 个 文件 ,使 用 记事 本 编写 ,然后 在 最 后 保存 的 时 
候 , 将 文件 扩展 名 改 为 . html、. css、.js; 就 可 以 让 代码 变 为 可 被 浏览 器 识别 的 HTML, CSS 
和 JavaScript 文档 。 然 而 记事 本 的 界面 还 是 不 够 友好 ,不 能 自动 实现 代码 缩 进 , 不 能 实现 代 
码 的 高 亮 显示 ,也 不 能 自动 补 全 可 能 的 函数 。 为 了 使 读者 更 为 方便 地 编写 代码 ,本 节 将 介绍 
三 款 比 较 流行 的 代码 编辑 器 。 在 本 书 的 相关 视频 资源 中 ,我 们 选择 一 款 编辑 器 来 讲解 ,介绍 
代码 编辑 器 的 一 些 实用 技巧 。 


1.7.1 Notepad 十 十 


Notepad 十 十 是 Windows 操作 系统 下 的 一 套 文本 编辑 器 ,有 完整 的 中 文 接口 及 支持 多 
国语 言 编 写 的 功能 (CUTF8 技术 ) 。 其 基本 概况 如 图 1. 31 所 示 。 

Notepad 十 十 功能 比 Windows 中 的 Notepad( 记 事 本 ) 强 大 ,除了 可 以 制作 一 般 的 纯 文 
字 说 明文 件 ,也 十 分 适合 编写 计算 机 程序 代码 。Notepad 十 十 不 仅 有 语法 高 亮度 显示 ,也 有 
语法 折 秋 功能, 并且 支持 宏 以 及 扩充 基本 功能 的 外 挂 模 组 。 

Notepad 十 十 是 免费 软件 , 自 带 中 文 ,支持 众多 计算 机 程序 语言 : C、C++、Java, pascal, 
C£ ,.XML,SQL, Ada, HTML, PHP, ASP, Autolt, Eii, DOS 批 处 理 、Caml、COBOL、 
Cmake, CSS,D, Diff, ActionScript, Fortran, Gui4Cli, Haskell, INNO, JSP, KlIXtart, 
LISP, Lua, Make A 38 ( Makefile), Matlab, INI X ft, MS-DOS Style, NSIS, Normal 
text, Objective-C, Pascal, Python, Javascript, Verilog, Haskell, InnoSetup, CMake, 
VHDL, Matlab, 
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D!  "DAsource\notepad4ever.cpp -Notepad++ ~ O WES 
Bs S LRR 2Əc em tt 
| lsd thn ee Ej notepesteve coo 日 | 





void notepad4ever () 
t 
while (true) 


1 t 
Notepad++ | 
) 
) 








图 1.31 Notepad++ 


1.7.2 Sublime Text 


Sublime Text 是 一 个 代码 编辑 器 , 它 是 由 程序 员 Jon Skinner F 2008 年 1 月 开发 出 来 
的 , 它 最 初 被 设计 为 一 个 具有 丰富 扩展 功能 的 Vim。 其 基本 界面 如 图 1.32 Bron. 


FOLDERS 

Y 加 tensorflow } í 
> BB tensorflow xcc@:d 
> BBB third party 
> B tools 
> B util XlaCompilationCache::XlaCq 


XlaCompilationCache::Com| 


O .gitignore 

DD ACKNOWLEDGMENTS 
<> ADOPTERS.md 

[5 AUTHORS 

/* BUILD 

[5 CODEOWNERS 

加 configure 


XlaCompilationCache::- Xla 


«input num; 











图 1.32 Sublime Text 





Sublime Text 具有 漂亮 的 用 户 界 面 和 强大 的 功能 ,例如 代码 缩 略图 .Python 的 插件 、 代 
码 段 等 ; 还 可 自 定 义 键 绑 定 .菜单 和 工具 栏 。Sublime Text 的 主要 功能 包括 拼写 检查 、 书 
签 .完整 的 Python API、Goto 功能 .即时 项 目 切 换 、 多 选择 .多 窗口 等 。Sublime Text 是 








个 跨 平 台 的 编辑 器 、 同 时 支持 Windows, Linux, Mac OS X 等 操作 系统 。 
1.7.3 Adobe Dreamweaver 


Adobe Dreamweaver 简称 DW ,中 文 名 称 * 梦 想 编织 者 ”, 是 美国 Macromedia 公司 开发 
的 集 网 页 制作 和 网 站 管理 功能 于 一 身 的 所 见 即 所 得 的 网 页 编辑 器 ,DW 是 第 一 套 针 对 专业 
网 页 设计 师 特 别 开 发 的 视觉 化 网 页 开发 工具 ,利用 它 可 以 轻而易举 地 制作 出 跨越 平台 限制 
和 跨越 浏览 器 限制 的 充满 动感 的 网 页 。 其 图 标 和 界面 分 别 如 图 1.33 和 图 1.34 所 示 。 

Macromedia 公司 成 立 于 1992 年 ,2005 年 被 Adobe 公司 收购 。 

Adobe Dreamweaver 使 用 所 见 即 所 得 的 接口 , 亦 有 
HTML( 标 准 通用 标记 语言 下 的 一 个 应 用 ) 编 辑 的 功能 。 它 
有 Mac 和 Windows 系统 的 版 本 。Macromedia 被 Adobe 收 
购 后 , Adobe 也 开始 计划 开发 Linux 版 本 的 Dreamweaver 
了 。Dreamweaver 自 MX 版 本 开始 ,使 用 了 Opera 的 排版 引 
5 Presto 作为 网 页 预览 。 





1.33 Dreamweaver 图 标 



































1.34 Dreamweaver 界面 


1.8 使 用 浏览 器 调试 


在 编写 代码 的 过 程 中 ,许多 时 候 代码 并 不 是 一 次 就 写 好 的 ,需要 开发 者 反复 地 结合 实际 
效果 进行 调试 。 对 于 HTML5 的 开发 者 来 说 ,可 以 使 用 浏览 器 工具 进行 相关 代码 的 调试 。 
尽管 不 同 种 类 的 浏览 器 所 使 用 具体 的 工具 有 所 不 同 ,但 浏览 器 调试 工具 所 实现 的 功能 都 大 
同 小 异 。 这 里 以 Chrome 浏览 器 作为 参考 ,来 认识 一 下 基本 的 使 用 浏览 器 调试 的 方法 。 本 
节 仅 对 HTML 元 素 、CSS 样式 JavaScript、 网 络 和 屏幕 展示 效果 进行 简要 讲解 ,读者 可 以 观 
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看 本 书 相关 视频 ,对 这 几 个 方面 的 调试 方法 进行 直观 地 学 习 。 除 此 之 外 ,浏览 器 中 的 其 他 相 
关 调 试 功能 ,将 根据 需要 在 本 书 的 后 续 章节 进行 介绍 。 

一 般 来 说 ,打开 要 进行 调试 的 网 页 后 , 按 F12 键 或 右 击 选择 “检查 "命令 (在 有 些 浏览 器 
中 也 被 称 为 “审查 元 素 ”), 即 可 进入 浏览 器 的 调试 界面 ,如 图 1. 35 和 图 1. 36 所 示 。 


























返回 (B) Alt+ 向 左 箭头 
前 进 (F) Alt+ 向 右 箭头 


重新 加 载 (R) Ctrl+R 


另存 为 (A)-… Ctrl+S 
打印 (P)… Ctrl+P 
投射 (C)… 

翻 成 中 文 (简体 ) (T) 


查看 网 页 源 代 码 (V) Ctrl+U 
检查 (N) Ctrl+Shift+1 








1.35 选择 “检查 ”命令 



































图 1.36 浏览 器 调试 界面 


1.8.1 HTML 元 素 


选择 任意 一 个 网 页 ,进入 浏览 器 的 调试 界面 , 单 击 Elements 选项 ,就 可 以 对 当前 网 页 的 
HTML 元 素 进行 审查 了 。 可 以 看 到 ,中 间 显 示 区 的 内 容 变 成 了 当前 HTML 文档 内 容 , 其 中 
为 了 便于 阅读 代码 ,浏览 器 会 对 文档 中 的 HTML 元 素 进行 一 定 的 显示 调整 。 标 签 、 内 容 、 
注释 都 以 不 同 颜色 显示 ,并 且 HTML 文档 中 的 元 素 按照 相互 的 附属 关系 进行 了 缩 进 显示 。 
当 使 用 鼠标 选择 一 个 HTML 元 素 时 ,这 个 元 素 在 网 页 中 将 会 加 阴影 显示 ,以 便于 调试 者 进 
行 定位 和 调试 ,如 图 1.37 所 示 。 

















1.37 HTML 元 素 审 查 


1.8.2 CSS 样式 


当选 择 了 一 个 HTML 元 素 后 ,观察 最 右 侧 的 显示 区 域 。 开 发 者 可 以 通过 该 区 域 对 选 
定 HTML 元 素 的 CSS 样式 进行 查看 与 调试 。CSS 样式 调试 区 域 显示 了 整个 文档 中 元 素 的 
CSS 样式 ,可 以 查看 每 个 元 素 都 设置 了 哪些 CSS 样式 。 选 中 的 HTML 元 素 的 CSS 样式 将 
会 在 这 个 显示 区 域 加 阴影 显示 ,如 图 1. 38 所 示 。 同 时 ,在 CSS 样式 调试 区 的 最 下 方 ,将 对 
应 显示 当前 选中 元 素 的 盒 模型 ,并 在 图 中 标 出 内 边 距 、 外 边 距 、 元 素 大 小 等 信息 ,如 图 1. 39 
所 示 。 


1.8.3 JavaScript 


为 了 演示 JavaScript 的 调试 过 程 ,我 们 编写 如 下 页 面 ,并 在 浏览 器 中 运行 。 
文件 名 : JavaScript 调试 . html 
<! DOCTYPE HTML > 


< html lang = "en- US" 
<head> 
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HTMLS AHE 











| Styles | Computed Event Listeners DOM Breakpoints Properties 
Filter :hov -cls +, 2 





element.style ( 
background-color: [J&ffffff; 
width: 1000px; 
margin: auto; 

} 

"t 

er 

padding: P 0; 
font-size: 14px; 
font-weight: normal; 
font-family: "R$", Arial, Helvetica, sans-serif; 
font-style: normal; 
text-align: left; 
color: 84676767; 

H 

div ( user agent stylesheet 
display: block; 


body ( 
height: 100%; 


text—Hgm—centens 
background: P | J#fff; 


"t 
margin: 0; 
padding: p 0; 





1.38 审查 CSS 样式 








1.39 审查 CSS 样式 盒 模型 


«meta charset = "UTF - 8"> 
«title»«/title» 


</head> 
<body> 
<script> 
var sum = 0; 
for (var i=1;i<=10;i++){ 
sum += i; 
) 
alert(sum); 
</script> 
</body> 
</html> 


在 浏览 器 中 运行 后 ,进入 浏览 器 调试 界面 ,选择 Source 菜单 ,在 该 选项 内 可 以 看 到 该 
HTML 文档 所 依赖 的 全 部 外 部 资源 ,如 图 片 .CSS、JavaScript 等 。 在 代码 显示 的 行 数 处 单 
击 行 号 , 即 可 在 该 位 置 设置 程序 断 点 ,程序 就 会 在 这 里 暂时 停止 运行 ,这 样 调试 人 员 就 可 以 
通过 逐 行 执行 语句 ,并 观察 各 变量 的 值 来 进行 JavaScript 代码 的 调试 ,如 图 1. 40 所 示 。 
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Sources Content scripts > 

Oto 

| Ye fiez 

v lli E/HTMLS/HTMLS/HTMLS/S6| 
Wl javascript tmt 











[w Ó] | Elements Console Sources Network Performance Memory Application Security Audits 


[E] | javascripti&li. htm! x 
DOCTYPE WIML 

2|«html lange"en-US"» 

3| «head» 

4 <meta charset="UTF-8"> 

5 «title»xc/title» 

6| </head> 

7| «body» 

8^ scripto 

var sum - 0; 


10 for (var i=1;i<=10;i++){ 
nu sum += i; 

12 ) 

3 alert(sum); 

14 — «/script» 

15| «/body» 

16 </html> 





"ott 
> Watch 

> Call Stack 

> Scope 

Y Breakpoints 


国 JavaScript 调 试 htmlt9 
var sum = 0; 


> XHR Breakpoints. 
> DOM Breakpoints 

> Global Listeners 

P Event Listener Breakpoints. 





FY 








1.40 添加 断 点 


刷新 页 面 , 可 以 发 现 程序 在 设置 断 点 的 位 置 停止 运行 ,如 图 1. 41 所 示 ,这 时 单 击 最 右 侧 
的 Watch 选项 ,选择 要 观察 的 变量 ,这 里 选择 sum 和 i 变量 来 观察 。 





[g Ú] | Hements Console Sources Network Performance Memory Application Security Audits ix 
[Sources | Content scripts » [Í] javascriptili html x Pom i t v 0 
YD top 2 DOCTYPE MTM O Paused on breakpoint 
<html lang-"en-US"» 
YO fiey/ 3| <head> Y Watch c 
Y BP E/HTMLS/HTMLS/HTMLS/X| á| <meta charset-"UTF-8"» sum: undefined 
Bi Javascript htm! 5| “title</tit1e> s 
6| </head> i: undefined 
He P Call Stack 
8 escript» 
var sun = B; > Scope 
1e for (var i=1;i<=10;i++){ Y Breakpoints. 
1 sum += i; 
32 Y 国 Javascript 调 坛 html9 
z alert(sum); var sum = 6; 
1 </script> ~ 
15| </body> > XHR Breakpoints 
16| </html> > DOM Breakpoints 











> Global Listeners. 
> Event Listener Breakpoints. 











图 1.41 程序 在 断 点 处 停止 运行 
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这 时 ,再 单 击 上 方 几 个 按钮 中 的 下 箭头 即 可 进行 代码 的 逐 行 执行 ,如 图 1. 42 所 示 ,所 要 
观察 的 变量 值 将 在 每 一 行 代 码 执行 过 后 更 新 。 单 击 最 左 侧 的 按钮 ,程序 将 会 直接 运行 到 下 
一 个 断 点 ,如 果 没 有 , 则 直接 继续 运行 到 结束 。 








[g ñ] | Elements Console Sources Network Performance Memory Application Security Audits 二 
Sources Content scripts 9^ $ [E] JavescriptiBist html x 回 | mw, At )t wo 
vOtop T| <!DOCTYPE HTML -lo 
Ón 2 <html lang-"en-US"» = 
3 3| «head» v Watch + 
V Ba E/HTMLS/HTMLS/HTMLS/%| — 4| <meta charset="UTF-8"> sus 6 
面 Javascript html 5| xctitleyc/titley : 
6 </head> i: 4 
7 «body» > Call Stack 
8 «scripto 
var sum = 0; * Scope 
10 for (var i-liic-l9iit+)f ` 
2i "E Breakpoints 
12 图 JavaScript 调 试 htmt9 
3 alert(sum); Wen sun š @j 
Mao «script z 
15| </body> > XHR Breakpoints 
16| </html> * DOM Breakpoints 
> Global Listeners 
* Event Listener Breakpoints 














1.42 逐 行 执行 代码 


另外 ,值得 注意 的 是 console 控制 台 界 面 , 开 发 者 可 以 在 其 中 输出 错误 相关 信息 ,并 畏 
助 调试 ,如 图 1. 43 所 示 。 浏 览 器 的 JavaScript 解释 器 的 相关 错误 也 会 被 显示 在 这 个 页 面 
中 ,并 可 以 通过 单 击 错误 提示 信息 的 方式 定位 到 出 错 代码 ,如 图 1. 44 所 示 。 





@ÇTl : x 


[X Ó] Elements Console Sources Network > 

© | top Y | Filter Default levels Y E 

© Uncaught SyntaxError: JavaScriptXESXBOXB3XESXAFXOS htm] :13 
Unexpected token ) 

>| 














1.43 控制 台 错 误 信 息 


1.8.4 网 络 


打开 一 个 网 页 后 ,进入 调试 界面 ,选择 Network 菜单 ,然后 刷新 页 面 .就 可 以 观察 浏览 
器 获取 网 络 资源 的 过 程 。 在 该 界面 中 ,最 上 方 有 整个 获取 全 部 资源 的 数据 流 简 图 ,在 简 图 的 
下 方 ,依次 排 开 的 是 所 获取 的 资源 ,在 这 里 可 以 查看 每 个 资源 的 文件 类 型 命名、 大 小 以 及 获 





[E | JavaScriptilist-html x PT 


4| <!DOCTYPE HTML» ^ 
2 <html lang-"en-US"» 
3| «head» 
4 «meta charset-"UTF-8"» 
5|  «titlex/title» 
6 </head> 
7| «body» 
8 «script» 
var sum = 0; 
10 for (var i=1;i<=10;i++){ 
11 sum += d; 
12 H 
13| alertsum); 
14 </script> 
15 </body> 
16 </html> 











1.44 通过 控制 台 定位 到 出 错 代码 





取 是 否 成 功 等 信息 ,如 图 1. 45 所 示 。 单 击 选 中 其 中 一 个 资源 ,就 可 以 看 到 这 个 资源 获取 的 
报 文 与 内 容 等 信息 ,如 图 1. 46 所 示 o 
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图 1.45 Network 调试 界面 












































Name X Headers Preview Response Cookies Timing 
lj YIZI 58819. 150060592724 titleUnjpg rg 
[E] 1121744956_1506656669125 tile0hjpg 2| body, div, dl, dt, dd,ul,ol,li, hl, h2, I3, h4,h5, h6, pre, form, fieldset, input 
[J irame_543mi H table fonder collapse" coiapse;border-spacing'0;) 
eldset,img (border:none; 
[ac Utu cie, coso, en strone, th var font-style:nornal; font- 
日 tes 8 ol,ul,1i (list-style-type: none;) 
7| caption, th(text-align:left;) 
lei bgjpg 8| h1,h2, h3, hà, h5, h6( Font - size: 100X; font-weight:normal;) 
L] waypng 9| q:before, q:after(content: 
Csat 10| abbr acronym(border:none;) 
š 型 | body (font-size:12px; color:black; font-family: "REIA 
L] slidepng 12|inputtextarea ( outline:none; resize: none;} 
< 13| input::-ms-clear(display:none;) 
E] wetdigistz-1 34| a(cursor:pointer;] 
LJ seed-minjs isited (text-decoration:none;curson:pointer] 
active (text-decoration:none;cursor:pointer) 
Bl ashmins 17 .clear(clear:both; width:@; height:0; margin:0; padding:0; 
[ time-labet 2.png | .clearfix:after(content: 7. ;display:block;height:0;clear:both;visibilit) 
L] 1.gif?z=1&a=15ecd0178dc&b=%u559C%u8FCE%uS6FD. 19| .hide(display:none;) 第 
a 20|.ellipsis(white-space:nowrap Mimportant; white-space:normal; overflow:hi 














1.46 单 击 选中 后 查看 资源 内 容 * 
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1.8.5 


屏幕 展示 效果 


为 了 能 够 观察 一 个 网 页 在 不 同 设备 上 的 展示 效果 ,浏览 器 为 开发 者 准备 了 屏幕 调整 界 
面 。 开 发 者 可 以 根据 需要 设置 不 同 的 屏幕 大 小 ,观察 各 自 的 展示 效果 并 调试 。 除 了 自 定义 





屏幕 大 小 外 ,还 可 以 直接 选择 不 同 移动 端 设 备 的 屏幕 直接 进行 效果 展示 ,同时 还 可 以 模拟 不 


同 运算 能 力 的 设备 以 及 不 同 的 网 络 环境 。 





Eun 


BANE 1.47 所 示 调 试 界面 左上 角 被 划 定 的 按钮 , 即 可 进行 屏幕 大 小 调整 。 
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图 1.47 单 击 进 入 屏幕 大 小 调整 界面 


在 这 个 界面 中 ,不 仅 可 以 自 定义 屏幕 大 小 ,还 可 以 直接 选择 特定 设备 ,进行 效果 查看 ,如 


图 1.48 


所 示 。 同 时 ,还 可 以 进行 屏幕 旋转 调整 ,以 及 不 同 网 络 状态 下 移动 设备 的 模拟 测试 。 
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图 1.48 选择 特定 的 移动 端 设备 


1.9 Web 服务 器 环境 


在 Web 的 概念 中 ,用 户 发 出 请 求索 要 相应 的 资源 ,而 Web 服务 器 (Web Server) 就 是 负 
责 处 理 这 些 请 求 的 一 方 。 

说 到 Web 服务 器 ,可 能 有 些 读 者 首先 想到 的 是 一 个 硕大 的 机 房 里 , 摆 着 无 数 柜子 ,柜子 
中 有 一 个 个 服务 器 在 24 小 时 地 运行 。 这 样 的 理解 没有 问题 。 如 果 以 硬件 来 描述 服务 器 , 服 
务 器 本 身 就 是 一 种 计算 机 , 它 与 大 家 平日 使 用 的 家 用 计算 机 本 质 上 没有 差别 ,只 不 过 会 有 更 
大 的 硬盘 空间 、 更 多 的 内 存 、 更 高 的 网 络 要 求 等 。 简 单 来 说 ,它们 就 是 为 其 他 互联 网 用 户 提 
供 服务 的 计算 机 。 

以 硬件 定义 的 服务 器 ,既然 本 质 上 就 是 计算 机 ,那么 它们 同样 需要 操作 系统 来 协调 计算 
机 的 硬件 资源 。 大 部 分 的 服务 器 都 运行 于 两 种 基本 的 操作 系统 环境 下 : 一 种 是 Linux 开源 
操作 系统 , 另 一 种 则 是 微软 的 Windows 操作 系统 (服务 器 版 )。 但 是 ,只 有 操作 系统 这 一 种 
软件 是 不 足以 实现 Web 服务 器 相关 的 功能 的 ,它们 还 需要 其 他 软件 ,这 些 软件 被 称 为 系统 
服务 (Daemons) 。 对 于 一 台 Web 服务 器 而 言 ,这 些 系统 服务 在 后 台 运 行 ,不 直接 受 服 务 器 
访问 者 和 使 用 者 的 控制 ,而 是 默默 地 提供 相应 的 服务 。 

容易 让 人 产生 疑惑 的 是 ,这 些 所 谓 的 系统 服务 软件 ,在 很 多 情况 下 ,也 被 称 为 服务 器 
(Servers)。 例 如 ,HTTP 服务 器 负责 发 送 用 户 所 请 求 的 文档 ,FTP 服务 器 负责 上 传 和 下 载 
文件 ,Email 服务 器 负责 收发 邮件 ,数据 库 (Database) 服 务 器 负责 管理 和 存储 网 站 数据 等 。 
本 节 所 要 具体 介绍 的 服务 器 相关 知识 ,偏重 于 软件 角度 定义 的 “服务 器 ”, 而 不 是 从 物理 硬件 
角度 定义 的 形 如 大 柜子 的 服务 器 。 

开发 者 需要 遵循 Web 相关 安全 标准 来 进行 开发 ,并 不 是 所 有 内 容 都 可 以 直接 使 用 浏览 
器 打开 本 地 文件 来 完成 测试 ,这 时 需要 将 文档 部 署 在 一 个 Web 服务 器 上 ,准确 地 说 是 一 个 
Web 服务 器 软件 上 , 即 一 个 服务 器 环境 中 。 下 面 推荐 一 个 较为 常见 的 服务 器 环境 供 读者 参 
考 并 自行 下 载 安装 ,以 便 之 后 顺利 地 进行 HTMLS 的 学 习 , 有 兴趣 的 读者 也 可 以 在 此 基础 
上 更 进一步 地 拓展 学 习 。 

WAMP 服务 器 一 般 指 Windows 下 的 Apache 十 MySQL 十 PHP, 它 们 是 一 组 常用 来 搭 
建 动态 网 站 或 者 服务 器 的 开源 软件 ,本 身 都 是 各 自 独立 的 .但 是 因为 常 被 放 在 一 起 使 用 , 便 
拥有 了 越 来 越 高 的 兼容 度 ,共同 组 成 了 一 个 强大 的 Web 应 用 程序 平台 。 与 之 相 类 似 的 还 有 
J2EE 和 .NET。 这 里 简单 介绍 WAMP 服务 器 , 供 大 家 参考 。 我 们 可 以 通过 访问 其 官网 
http://www. wampserver. com/en/ 来 进行 下 载 并 安装 。 

1. Apache 

Apache HTTP Server( 简 称 Apache) 是 Apache 软件 基金 会 的 一 个 开放 源码 的 网 页 服 
务 器 ,可 以 在 大 多 数 计算 机 操作 系统 中 运行 ,由 于 其 多 平台 和 安全 性 而 被 广泛 使 用 ,是 最 流 
行 的 Web 服务 器 端 软 件 之 一 。 

类 似 的 Web 服务 器 还 有 Nginx, Nginx 是 一 款 轻 量 级 的 Web 服务 器 / 反 向 代理 服务 器 
及 电子 邮件 (IMAP/POP3) 代 理 服务 器 ,并 在 一 个 BSD-like 协议 下 发 行 。 其 特点 是 占用 内 
存 少 、 并 发 能 力 强 。 除 此 之 外 还 有 微软 的 IIS, 即 互联 网 信息 服务 (Internet Information 
Services), IIS 是 一 种 Web( 网 页 ) 服 务 组 件 , 其 中 包括 Web 服务 器 .FTP 服务 器 .NNTP 服 
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务 器 和 SM TP 服务 器 ,分 别 用 于 网 页 浏览 ,文件 传输 、 新 闻 服 务 和 邮件 发 送 等 方面 , 它 使 得 
在 网 络 (包括 互联 网 和 局 域 网 ) 上 发 布 信息 成 了 一 件 很 容易 的 事 。 

2. MySQL 

MySQL 是 一 个 关系 型 数据 库 管理 系统 (Relational Database Management System, 
RDBMS) ,由 瑞典 MySQL AB 公司 开发 ,目前 属于 Oracle 旗下 产品 ,由 于 其 卓越 的 Web 应 
用 性 能 及 其 开源 的 特点 ,目前 是 最 流行 的 关系 型 数据 库 管 理 系 统 之 一 。 

所 谓 数 据 库 管理 系统 ,就 是 一 种 操纵 和 管理 数据 库 的 大 型 软件 ,用 于 建立 、 使 用 和 维护 
数据 库 , 简 称 DBMS。 它 对 数据 库 进行 统一 的 管理 和 控制 ,以 保证 数据 库 的 安全 性 和 完整 
性 。 其 他 的 数据 库 管理 系统 ,还 有 Oracle 和 Microsoft SQL Server 等 。 

3. PHP 

PHP 是 一 种 通用 开源 脚本 语言 。 在 语法 上 吸收 了 C A Java 和 Perl 的 特点 ,便于 学 
习 , 使 用 广泛 ,主要 适用 于 Web 开发 领域 。PHP 作为 服务 器 端 代 码 脚本 语言 ,主要 用 于 对 
前 端 所 采集 数据 的 处 理 以 及 与 数据 库 管 理 系 统 的 交互 ,动态 地 将 网 站 资源 展现 给 用 户 。 

除 此 之 外 ,C++ Java, C # , Python, Perl, JavaScript 等 都 可 以 作为 服务 器 端 语言 ,请 读 
者 结合 自己 的 应 用 场景 ,灵活 地 选择 语言 和 环境 。 本 书 一 部 分 实例 简单 提供 了 少量 PHP 
代码 ,但 不 提供 PHP 基本 语法 的 讲解 ,请 读者 以 理解 为 主 ,简单 学 习 PHP 语法 。 


1.10 2J 题 


1. 浏览 器 是 什么 ? 其 背后 的 运行 原理 是 怎样 的 ? 一 个 网 页 是 如 何 从 服务 器 传送 到 浏 
览 器 ? 然后 又 是 被 怎样 呈现 给 用 户 的 ? 

2. 为 什么 要 有 HTML5? 

3. HTML,CSS 和 JavaScript 是 什么 ? 在 Web 中 起 怎样 的 作用 ? 

4. URL 是 什么 ? 在 Web 中 有 什么 作用 ? 它 与 URI 有 什么 区 别 和 联系 ? 

5. 什么 是 DOM? 它 有 怎样 的 应 用 ? 

6. 使 用 记事 本 编写 一 个 HTML 页 面 , 再 选用 一 个 代码 编辑 器 编辑 一 个 HTML 页 面 ， 
对 比 两 种 代码 编写 方式 的 区 别 。 

7. 利用 HTML 的 标题 .段落 等 元 素 编写 一 个 电影 介绍 网 页 。 

8. 为 第 7 题 中 的 网 页 添加 CSS 样式 ,使 网 页 内 各 元 素 定位 更 为 美观 。 

9. 简 述 什么 是 CSS 中 的 盒 式 模型 。 

10. 简 述 CSS 中 的 定位 方式 。 

11. 使 用 JavaScript 编写 一 个 斐 波 纳 契 数列 计算 。 

12. 使 用 浏览 器 调试 工具 对 第 11 题 中 的 代码 进行 调试 , 逐 行 执行 ,观察 各 变量 的 值 。 

13. 搜索 相关 信息 ,简要 介绍 WAMP 之 外 的 几 种 服务 器 环境 。 
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HTML 表单 元 素 是 网 站 向 访客 收集 信息 的 元 素 , 在 这 个 HTML 元 素 中 ,用 户 能 够 以 表 
单 的 形式 将 自己 的 个 性 化 信息 填 和 人 ,并 通过 提交 表单 实现 来 自用 户 端的 信息 向 服务 器 端的 
投递 。 这 个 过 程 同 我 们 在 银行 办 理 某 些 业务 而 填写 表单 并 上 交 是 一 个 道理 。 现 实 中 的 表单 
会 列 出 所 需 填写 的 信息 并 留 出 相应 空白 让 用 户 填 写 ,类 似 地 ,Web 应 用 也 以 相似 的 方式 指 
导 用 户 填 写 ,< label > 标签 指明 需要 填写 哪些 信息 ,< input > 标签 负责 接收 来 自用 户 的 输入 ， 
用 户 可 以 以 单 选 , 多 选 . 文 本 等 方式 进行 输入 ,最 后 单 击 “ 提 交 ” 按 钮 ,完成 一 次 表单 的 填写 与 
上 传 的 过 程 。 抽 象 来 说 ,HTML 表单 的 过 程 就 是 ,浏览 器 友好 地 向 用 户 提 供 输 入 的 界面 , 然 
后 将 从 用 户 端 所 收集 的 信息 转换 为 一 组 组 以 键 值 对 形式 存在 的 数据 项 ,最 后 将 这 些 数据 项 
上 传 至 服务 器 端 。 

本 章 首先 学 习 基 本 的 HTML 表单 形式 和 传统 的 上 传 控 件 ,然后 着 重 学 习 HTMLS 所 
提供 的 新 的 表单 上 传 控 件 .表单 元 素 和 表单 属性 。 需 要 注意 的 是 ,本 章 的 内 容 着 重 于 表单 的 
形式 ,具体 的 表单 提交 和 处 理 的 功能 讲解 将 被 安排 在 第 11 36. 


2.1 表单 形式 


一 般 来 说 ,一 份 HTML5 表单 主要 由 < form > 元 素 统领 ,然后 在 其 中 以 < fieldset > 作为 
不 同 表单 域 的 逻辑 划分 。 比 如 ,一 个 订单 信息 中 ,有 个 人 信息 区 域 ,也 有 订单 信息 区 域 。 在 
这 些 划分 的 域 下 便 是 一 个 个 < label > 标签 来 指示 需要 填写 的 信息 ,在 < label > 旁 使 用 不 同类 
型 的 输入 控件 来 承载 用 户 所 填写 的 信息 ,最 后 添加 提交 按钮 。 这 便 是 许多 Web 表单 的 基本 
形式 。 
下 面 这 个 实例 是 一 个 简单 的 用 户 注册 页 面 界面 ,在 这 个 页 面 中 ,需要 输入 用 户 名 和 相应 
的 密码 ,并 单 击 “ 提 交 ” 按 钮 来 完成 注册 。 该 实例 在 浏览 器 中 的 展示 效果 如 图 2. 1 所 示 。 
文件 名 : 表单 基本 形式 . html 
<! DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 
<style> 
fieldset{ 
width:80px; 
} 
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</style> 
</head> 
<body> 
< form action = "" method = "post"> 
< fieldset > 
< legend > 用 户 注册 </legend> 
< label for = "username"> 用 户 名 : </label > 
<br /> 
< input id= "username" type = "text" name = "username"/> 
<br /> 
< label for = "password"> 密 码 : </label > 
<br /> 
< input id= "password" type = "password" name = "password"/> 
<br /> 
< input type = "submit" value = "提交 "人 > 
</fieldset > 
</form> 
</body> 
</html> 
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图 2.1 表单 基本 形式 


在 这 个 实例 中 ,可 以 看 到 < form > 元 素 代 表 了 一 个 能 够 被 提交 的 HTML 表单 单元 ,在 
< form > 标签 内 有 action 和 method 属性 ,它们 在 提交 表单 的 过 程 中 具有 一 定 的 意义 。 由 于 
本 章 重点 在 于 HTML 表单 形式 而 不 注重 表单 提交 的 功能 ,所 以 在 此 并 不 详细 展开 。 随 后 ， 


在 < form > 标签 内 ,我们 可 以 看 到 < fieldset > 标签 和 < legend > 标签 共同 进行 了 表单 内 部 区 
域 的 逻辑 划分 ,< fieldset > 负责 逻辑 分 割 ,在 浏览 器 中 为 表单 区 域 添加 了 边框 ,< legend > 标 
签 提 供 了 一 个 表单 区 域 的 标题 信息 ,在 本 实例 中 即 是 “用 户 注册 ”这 一 文本 。 

然后 便 是 一 个 表单 输入 部 分 。 一 般 来 说 ,使 用 < label > 标签 来 指示 用 户 填写 哪 一 类 信 
息 ,使 用 < input > 控件 来 承载 。 需 要 注意 的 是 < label > 和 < input > 中 的 属性 。< input > 标签 
的 type 属性 确定 了 这 一 输入 控件 的 类 型 ,而 name 属性 则 指定 了 这 一 输入 内 容 的 命名 ,这 个 
命名 会 与 输入 内 容 组 成 键 值 对 保存 到 所 提交 表单 的 HTTP 报 文中 ,并 可 被 服务 器 端 通过 这 
个 命名 来 获取 输入 值 。< label > 标签 中 的 for 属性 则 是 指定 该 标签 与 哪 一 个 输入 控件 进行 捆 
绑 , 设 置 for 属性 为 被 捆绑 输入 控件 的 id 即 可 ,具体 的 实现 效果 就 是 当 用 户 单 击 到 < label > 标 
签 时 等 同 于 单 击 到 了 其 所 捆绑 的 输入 控件 。 最 后 是 表单 的 “提交 ”按钮 , 它 是 一 个 type 属性 为 
submit 的 < input > 标签 ,在 完成 表单 的 填写 后 ,用 户 可 以 单 击 它 完成 提交 表单 的 工作 。 由 于 本 
实例 仅 起 示范 作用 ,所 以 实例 中 仅 使 用 HTML 换行 符 “< br />? 进 行 表单 的 格式 调整 。 在 实际 
应 用 的 Web 表单 中 ,开发 者 可 以 通过 CSS 为 表单 增添 更 为 美观 的 布局 。 


2.2 传统 输入 控件 


在 2.1 节 的 实例 中 ,可 以 看 到 < input > 标签 作为 输入 控件 可 以 为 提交 按钮 ,也 可 以 为 文 
本 输入 ,或 者 是 密码 输入 。 除 此 之 外 , 它 还 可 以 是 单 选 按钮 ` 复 选 框 等 。 本 节 将 详细 介绍 这 
些 传统 HTML 表单 中 常见 的 输入 控件 。 

在 这 里 通过 一 个 简单 的 实例 来 覆盖 这 些 输入 控件 。 这 个 实例 是 一 个 用 来 填写 宠物 狗 和 
主人 信息 的 HTML 表单 。 该 实例 在 浏览 器 中 的 展示 效果 如 图 2. 2 所 示 。 
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图 2.2 传统 输入 控件 
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文件 名 : 传统 输入 控件 . html 


<!DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF - 8"> 
<title></title> 
</head> 
<body> 
< form action = "" method = "post"> 
< fieldset > 
< legend> 主 人 信息 </legend> 
< label for = "owner"> 姓 名 :</label >< input id= "owner" type = "text" name = 
"owner"/> 
< label for = "age"> 年 龄 : </label >< input id = "age" type = "text" name = "age"/> 
</fieldset> 
<fieldset> 
< legend > 狗 子 信息 </legend> 
< label for = "petName"> 狗 子 名 </label > 
< input id = "petName" type = "text" name = "petName"/> 
< label > 狗 子 品种 </label > 
< select id= "petKind" name = "petKind"» 
<option valu goldenRetriever"> 金 毛 </option> 
< option value = "alaska"> 阿 拉 斯 加 </option> 
< option value = "shibaInu"> 柴 犬 </option> 
< option value = "husky"> 了 哈士奇 </option> 
< option value = "Samoyed"> 萨 摩 </option > 
</select> 
<br /> 
< label > 狗 子 性 别 </label > 
< input type = "radio" value 









masculine" name = "petGender"/> 公 
< input type = "radio" value = "feminine" name = "petGender" />#F 
<br /> 
< label > 狗 子 特点 </label > 
< input name = "petFeatures" type = "checkbox" value = "lazy"/> 懒 
< input name = "petFeatures" type = "checkbox" value = "naughty"/> 调 皮 






< input name = "petFeatures" type = "checkbox" value = "calm"/> 冷 静 
< input name = "petFeatures" type = "checkbox" value = "crazy"/> 疯 狂 
<br /> 
< label for = "extraInfo"> 额 外 信息 </label > 
<br /> 
< textarea id= "extraInfo" name = "extraInfo" cols= "30" rows = "10"»«/textarea» 
<br /> 
< input type = "reset" value = " 重 置 "/>< input type = "submit" value = "提交 "/> 
</fieldset > 
</form> 
</body> 


</html> 


1. 单行 文本 

将 <input > 标签 type 属性 设置 为 text, 它 就 变 为 了 单行 文本 输入 框 , 用 户 可 以 在 此 输入 
可 见 的 文本 信息 。 同 样 是 单行 文本 , 若 将 type 属性 设置 为 password,< input > 标签 则 变 成 
了 密码 输入 框 , 即 内 容 不 可 见 的 单行 文本 输入 框 。 在 这 个 表单 中 ,主人 名 和 年 龄 以 及 狗 子 名 
这 几 个 字段 的 输入 控件 均 为 单行 文本 。 

2. 多 行文 本 

有 时 需要 输入 一 定量 的 文本 信息 ,并且 用 户 必须 对 自己 所 写 内 容 保持 可 见 。 使 用 单行 
文本 输入 控件 不 能 满足 这 样 的 需求 ,这 时 需要 使 用 多 行文 本 输入 控件 。 直 接 在 表单 元 素 中 
间 插 入 < textarea > 标签 即 可 。 

< textarea > 标签 可 以 让 用 户 进 行 多 行文 本 的 输入 ,在 设置 name 属性 的 基础 上 ,还 需 设 
定 这 个 多 行文 本 的 行 数 和 列 数 ,来 确定 这 个 多 行文 本 输入 区 域 的 大 小 。cols 属性 决定 了 多 
行文 本 区 域 横向 的 长 度 ,而 rows 属性 则 决定 了 多 行文 本 纵向 的 长 度 。 

在 上 述 实例 中 ,我 们 添加 了 一 个 横向 长 度 为 30 单元 、 纵 向 长 度 为 10 单元 的 多 行文 本 元 
素 ,来 让 用 户 填 写 宠 物 的 额外 信息 。 

3. 单 选 按钮 

将 < input > 标签 type 属性 设置 为 radio, 它 就 变 成 了 单 选 按钮 输入 控件 。 单 选 按钮 对 
于 同一 个 输入 而 言 意味 着 只 能 有 一 个 选项 , 即 各 个 选择 之 间 是 互 斥 的 。 通 过 将 一 组 type 
属性 为 radio 的 < input > 标签 设置 同样 的 name 属性 即 可 实现 多 个 选项 进行 单项 选择 的 
功能 。 

此 外 ,还 需 对 这 样 一 组 的 单 选 备 选 选项 添加 value 属性 值 ,指定 每 一 个 备 选项 实际 代表 
的 值 。 例 如 在 实例 中 ,宠物 的 性 别 字段 采用 的 是 单 选 输入 ,虽然 在 显示 上 给 用 户 呈 现 的 是 
“ 公 ” 和 “ 母 ”, 而 实际 上 在 表单 被 填写 后 ,该 处 数据 所 填 和 人 的 值 为 单 选 输入 背后 的 value 值 ， 
即 masculine 或 feminine。 

如 果 将 一 组 单 选 按钮 的 其 中 一 个 选项 直接 添加 checked 属性 ,例如 ,< input type = 
"radio" value— "masculine" name= "petGender" checked/>, 则 这 个 选项 在 页 面 加 载 后 呈现 
默认 色 选 状态 。 

4. 复 选 框 

将 < input > 标签 type 属性 设置 为 checkbox, 它 就 变 成 了 复 选 框 输入 控件 。 复 选 框 对 于 
同一 个 输入 而 言 意味 着 可 以 进行 多 个 选项 的 选择 ,选项 之 间 的 关系 并 不 互 斥 。 类 似 于 单 选 
按钮 , 复 选 框 也 需要 一 组 name 属性 相同 的 < input > 标签 来 指 代 同 一 个 输入 ,value 属性 代表 
每 个 多 选 框 背 后 实际 的 输入 值 。 同 样 地 ,为 复 选 框 的 某 一 项 添加 checked 属性 后 ,这 一 项 就 
会 在 页 面 载 人 后 被 默认 色 选 。 

在 本 节 的 实例 中 ,使 用 一 组 多 选 框 作为 宠物 特点 的 备 选 输入 ,它们 的 name 属性 均 被 设 
置 为 petFeatures, 然 后 每 个 选项 都 有 各 自 背 后 的 value f ,这样 就 实现 了 多 选 输入 。 

5. 列表 

简单 来 说 ,列表 输入 就 是 平常 说 的 下 拉 框 。 与 其 他 控件 不 同 , 我 们 需要 使 用 < select > 标 
签 搭配 一 组 < option > 标签 来 实现 。< select > 标签 直接 代表 一 个 下 拉 框 元 素 ,< option > 标签 
则 代表 这 个 < select > 标签 下 的 备 选 项 ,实际 上 ,下 拉 框 元 素 本 身 也 是 单 选 输入 控件 ,我 们 只 
能 通过 单 击 下 拉 框 来 选择 其 中 一 项 作为 输入 。 
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在 这 个 输入 控件 中 ,需要 在 < select > 标签 设置 name 属性 ,并且 给 每 个 < option > 标签 设 
置 value 属性 值 ,这 样 才 可 以 将 < select > 和 < option > 对 应 起 来 ,在 填写 表单 之 后 ,完成 数据 
项 构建 。 在 上 述 实例 中 ,我 们 使 用 < select > 标签 实现 了 下 拉 框 选择 宠物 狗 的 品种 ,并 设置 
name 属性 为 petKind ,然后 在 < select > 标签 下 的 每 一 个 < option > 标签 设置 各 自 的 value fü. 
这 样 就 完成 了 一 个 列表 输入 控件 的 构建 。 

6. 按钮 

将 < input > 标签 的 type 属性 设置 为 submit, 它 就 变 为 了 提交 按钮 , 单 击 提交 按钮 就 可 
以 完成 一 个 表单 的 提交 。 类 似 地 ,将 type 属性 设置 为 reset. 它 就 变 为 重 置 按钮 , 单 击 重 置 
按钮 就 可 以 将 已 填写 内 容 全 部 置 为 空 ; 将 type 属性 设置 为 button, 它 会 变 成 单纯 的 一 个 按 
钮 ,开发 者 需要 为 其 添加 特定 的 JavaScript 代码 才 可 以 实现 特定 的 功能 。 其 中 还 需 注意 的 
是 ,对 每 一 个 按钮 控件 ,还 需要 为 其 添加 value 属性 作为 按钮 的 文本 提示 。 

在 上 述 实例 中 ,可 以 看 到 添加 了 两 个 按钮 控件 ,分 别 是 提交 按钮 和 重 置 按钮 ,并 为 这 两 
个 按钮 添加 了 中 文 形式 的 文本 作为 按钮 内 容 , 来 提示 用 户 按钮 的 功能 。 


2.3 新 的 输入 控件 


2.2 节 中 我 们 认识 了 传统 的 一 些 表单 输入 控件 ,包括 单 选 按钮 . 复 选 框 \ 列 表 、 单 行文 
本 、 多 行文 本 和 按钮 。 在 HTML 最 新 的 HTML5 标准 中 ,又 出 现 了 更 多 类 型 的 输入 控件 ， 
尽管 这 些 控件 中 的 一 部 分 在 形式 上 与 单行 文本 输入 框 并 无 区 别 , 但 在 实际 应 用 中 ,配合 其 他 
的 HTMLS 新 属性 会 给 开发 人 员 在 验证 和 编辑 表单 信息 上 提供 一 些 便利 。 

本 节 将 会 使 用 一 个 用 户 信息 表单 实例 讲解 电子 邮件 地 址 .电话 号 码 ,数值 这 三 个 输入 控 
件 ,然后 再 通过 一 个 简单 的 实例 讲解 滑动 条 、 搜 索 框 \ 网 址 .日 期 和 时 间 这 些 余下 的 输入 
控件 。 

请 看 如 下 实例 ,该 实例 通过 邮件 地 址 .电话 号 码 和 数值 这 三 个 输入 控件 构造 了 一 个 简单 
的 用 户 信息 表单 。 实 例 在 浏览 器 中 的 展示 效果 如 图 2. 3 所 示 。 

文件 名 : 新 的 输入 控件 . html 


<! DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF — 8"> 
«title»«/title» 
</head> 
<body> 
< form action = "" method = "post"> 
< fieldset > 
< legend> 个 人 信息 </legend> 
< label for = "owner"> 姓 名 : </label >< input id= "owner" type = "text" name = 
"owner" /> 
< label for = "age"> 年 龄 : </label >< input id= "age" type = "number" name = "age" 
min = "1" max = "120" /> 
<br /> 
< label for = "email"> 邮 箱 : </label >< input type = "email" id= "email" name = 


"emailAddr" /> 
<br /> 
< label for = "telephone"> 电 话 : </label >< input type = "tel" id= "telephone" name 
= "telNunber"/» 
«br J> 
< input type = "submit" value = "提交 "/> 
</fieldset > 
</form> 
</body> 
</html> 
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个 人 信息 
姓名 : tok 年 龄 : 20 
邮箱 l la@q com 

mis: 

dem, 





BIAC, 






































图 2.3 邮件 地 址 .电话 和 数值 输入 控件 


1. 电子 邮件 地 址 

将 <input > 标签 type 属性 设置 为 email 即 可 将 输入 控件 设置 为 电子 邮件 类 型 ,尽管 设 
置 完成 之 后 的 控件 与 单行 输入 文本 控件 形式 上 无 异 , 但 是 这 样 的 电子 邮件 地 址 类 型 输入 将 
会 自动 地 在 表单 提交 的 时 候 对 所 输入 内 容 进行 初步 校 验 。 在 大 多 数 情况 下 ,电子 邮箱 地 址 
是 由 字符 串 和 “@” 符 号 构成 的 ,如 车 不 符合 这 个 形式 ,浏览 器 将 会 自动 阻止 一 次 提交 行为 ， 
并 向 用 户 反 馈 相关 提示 信息 ,指示 用 户 输入 适当 的 电子 邮件 地 址 格式 。 其 在 浏览 器 中 的 效 
果 如 图 2.4 所 示 。 

2. 电话 号 码 

将 < input > 标签 type 属性 设置 为 tel, 它 就 会 变 为 一 个 电话 号 码 输入 控件 。 在 大 多 数 浏 
览 器 中 ,这 个 输入 控件 仍然 以 单行 文本 输入 框 的 形式 存在 。 由 于 电话 号 码 本 身 没 有 一 个 全 
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个 人 信息 
姓名 : 年 龄 : 
邮箱 : [1234 
电话 : 


r3 














































Hi 请 在 电子 邮件 地 址 中 包 
j&'Q". “1234"“ 中 缺少 @"。 

















2.4 电子 邮箱 地 址 验证 


世界 统一 的 格式 , 它 有 时 仅 由 数字 组 成 ,有 时 也 包含 空格 、 横 线 、 加 号 等 ,所 以 在 HTML5 规 
范 中 并 未 要 求 浏览 器 对 电话 号 码 输入 进行 验证 操作 。 目 前 ,电话 号 码 类 型 的 输入 控件 的 主 
要 用 途 是 在 移动 浏览 器 端 ,在 进行 电话 号 码 输入 时 会 自动 选用 数字 键盘 ,为 用 户 提 供 一 定 程 
度 的 便利 。 

3. 数值 

将 <input > 标签 type 属性 设置 为 number, 它 就 变 成 了 一 个 数值 输入 控件 。 在 这 个 控件 
中 ,用 户 只 可 以 输入 数值 数据 ,不 可 以 输入 字母 。 此 外 ,还 可 以 设置 min 属性 指定 输入 数值 
的 最 小 值 ,max 属性 指定 输入 数值 的 最 大 值 ,这 样 就 可 以 直接 使 用 该 输入 控件 对 用 户 的 输 
入 进行 简单 的 验证 ,如 若 用 户 的 输入 不 符合 控件 的 数值 规定 范围 则 表单 不 会 被 提交 。 例 如 ， 
年 龄 字段 规定 的 数值 范围 是 1 一 120 , 若 输入 0 将 不 会 被 提交 ,如 图 2. 5 所 示 。 

4. 滑动 条 

将 < input > 标签 type 属性 设置 为 range, 它 就 变 成 了 一 个 滑动 条 输入 控件 。 与 数值 类 
型 输入 控件 相 类 似 , 滑 动 条 输入 控件 也 只 接收 数值 输入 ,但 是 必须 设置 min 和 max 属性 指 
定 输入 的 数值 范围 。 在 浏览 器 中 ,滑动 条 输入 控件 就 显示 为 一 个 滑动 条 形式 ,滑动 条 的 变化 
范围 就 是 min 属性 和 max 属性 所 指定 的 范围 。 然 而 ,在 大 多 数 浏览 器 中 ,滑动 条 在 用 户 滑 
动 的 过 程 中 ,并 不 能 显示 刻度 或 当前 的 取 值 。 在 下 面 的 这 个 实例 中 ,我们 将 简单 地 使 用 滑动 
条 输入 控件 ,并 加 入 少量 JavaScript 代码 来 显示 当前 的 取 值 。 该 实例 在 浏览 器 中 的 展示 效 
果 如 图 2.6 所 示 。 
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个 人 信息 

姓名 : 年 龄 :| Z 
邮箱 : p= 

电话 :一 一 一 一 一 | Hl 伯 必 须 大 于 或 等 于 1. 
提交 





















































2.5 数值 验证 





























图 2.6 滑动 条 输入 控件 
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文件 名 : 滑动 条 . html 


<! DOCTYPE HTML > 
<html lang = "en- US"> 
< head> 
< meta charset = "UTF - 8"> 
«title»«/title» 
</head> 
< body> 
< form action = "" method = "post"> 
<fieldset > 
< legend > 你 的 体重 </legend> 
< label for = "weight"> 体 重 (kg)</label> 
< input type = "range" id= "weight" name = "weight" min = "20" max = "300"/» 
<br /> 
<p id= "nyWeight"»«/p» 
< input type = "submit" value = "提交 "/> 
«/fieldset» 
</form> 
«script» 
var w = document. getElementById("nmyWeight"); 
var wInput = document. getElementById(" weight"); 
window. onload = function assignValue()( 
w.innerHTML - wInput.value * "kg"; 
) 
wInput.onchange = function assignValue()( 
w.innerHTML - wInput.value * "kg"; 
) 
</script > 
</body> 
</html> 


在 这 个 实例 中 ,通过 设置 min 和 max 属性 将 滑动 条 的 取 值 上 限 设置 为 300, 下 限 设 置 为 
20。 同 时 ,为 这 个 表单 添加 了 一 些 JavaScript 代码 来 对 滑动 条 取 值 进行 动态 显示 。 在 
JavaScript 代码 中 ,我 们 添加 了 一 个 页 面 加 载 和 滑动 条 取 值 改变 的 事件 监听 ,并 添加 相应 的 
事件 处 理 函数 ,将 滑动 条 输入 控件 的 当前 取 值 反馈 到 表单 中 的 < p > 元 素 内 进行 显示 。 

使 用 滑动 条 的 时 候 , 只 使 用 鼠标 可 能 并 不 能 很 精确 地 对 取 值 进行 调整 。 这 时 ,可 以 选中 
滑动 条 控件 的 同时 ,使 用 键盘 的 方向 键 对 滑动 条 取 值 进行 微调 。 

5. 搜索 框 

将 <input > 标签 type 属性 设置 为 search , 它 就 会 变 为 一 个 搜索 输入 控件 。 在 形式 上 , 搜 
索 框 与 单行 文本 输入 没有 区 别 , 但 是 搜索 输入 控件 本 身 具 有 一 定 的 语义 性 ,这 也 是 其 最 重要 
的 意义 。 使 用 搜索 输入 控件 可 以 为 用 户 提供 很 多 便利 ,他 们 可 以 使 用 特定 的 软件 快速 找到 
一 个 网 页 中 的 搜索 框 , 并 能 够 直接 执行 搜索 功能 。 

6. 网 址 

将 <input > 标签 type 属性 设置 为 url, 它 就 会 变 为 一 个 网 址 输入 控件 。 用 户 在 输入 数据 


后 进行 提交 时 ,浏览 器 会 对 所 输入 数据 进行 简单 校 验 ,判断 其 是 不 是 一 个 网 址 。 当 然 ,网 址 
的 形式 是 多 种 多 样 的 ,很 难 约定 统一 成 一 个 固定 的 模式 ,一般 浏览 器 只 判断 一 个 输入 是 否 具 
有 一 个 URL 中 的 开头 协议 信息 ,比如 “https://”, 只 要 有 这 部 分 就 会 被 浏览 器 接受 ,否则 将 
会 终止 表单 提交 并 提醒 用 户 。 下 面 的 这 个 实例 便 展示 了 网 址 输入 控件 的 简单 使 用 , 当 所 输 
入 的 网 址 仅 为 example. com 时 ,所 输入 内 容 并 不 符合 一 个 URL 的 基本 形式 , 便 会 被 浏览 器 
拒绝 ,如 图 2.7 所 示 。 
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网 址 输入 控件 
| [example com ll 提交 


加 请 输入 网 址 . 


[eje © 3x ] 









































2.7 网址 URL 验证 


文件 名 : 网 址 输入 控件 . html 


<! DOCTYPE HTML > 
<html lang = "en — US"> 
<head> 
< meta charset = "UTF — 8"> 
«title»«/title» 
</head> 
< body> 
< form action = "" method = "post"> 
< fieldset > 
< legend> 网 址 输入 控件 </legend> 
< input type = "url" name = "urlInput"/> 
< input type = "submit" value = "提交 "/> 
</fieldset> 
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</form> 
</body> 
</html> 
7. HRH 
日 期 和 时 间 类 型 的 输入 控件 是 一 系列 输入 控件 ,浏览 器 会 以 人 性 化 的 方式 显示 日 期 或 
时 间 来 让 用 户 填 写 , 使 用 户 填写 的 过 程 更 加 便利 并 且 还 让 用 户 所 填 的 日 期 和 时 间 信 息 具有 
统一 的 格式 。 下 面 这 个 实例 包含 所 有 的 日 期 和 时 间 输 入 控件 。 该 实例 在 浏览 器 中 的 展示 效 


果 如 图 2.8 所 示 。 


D) 网 址 输入 控件 html x ND 
€ > G | © fileW/EVHTMLSVHTMLS/HTML5/ 表 单 /网 址 输入 控件 html 图 *| i 














日 期 和 时 间 输入 类 型 
日 期 时 间 : (2007/10/07 --:-- xiv 

2017410 v RII 
周一 周二 周三 周 四 周 五 周 六 周 日 


30 








3 4 5 
10 11 12 
17 418 19 
24 25 26 
31 1 ] 























2.8 日 期 和 时 间 输入 控件 


文件 名 : 日 期 和 时 间 输 入 控件 html 


<! DOCTYPE HTML > 
<html lang = "en 一 US"> 
<head> 
< meta charset = "UTF - 8"> 
<title></title> 
</head> 
<body> 
< form action = "" method = "post"> 
< fieldset > 
< legend> 日 期 和 时 间 输 入 类 型 </legend> 
< label for = "datetimelocalInput"> 日 期 时 间 : </label> 


< input type = "datetime- local" id= "datetimelocalInput" name = "datetimelocal"/» 
<br /> 
< label for = "dateInput"> 日 期 : </label > 
< input type = "date" id= "dateInput" name = "date"/» 
<br /> 
< label for = "timeInput"> 时 间 : </label > 
< input type = "time" id= "timeInput" name= "time"/> 
<br /> 
< label for = "monthInput"> 月 份 : </label > 
< input type = "month" id = "monthInput" name = "month"/> 
<br /> 
< label for = "weekInput"> 周 数 : </label > 
< input type = "week" id= "weekInput" name = "week"/> 
<br /> 
< input type = "submit" value = "提交 "/> 
«/fieldset» 
</form> 
</body> 
</html> 
观察 上 述 实 例 在 浏览 器 中 的 运行 效果 ,可 以 看 出 日 期 和 时 间 类 型 的 输入 控件 的 具体 作 
用 。 日 期 和 时 间 输 入 控件 为 HTML 表单 的 填写 者 提供 了 一 个 较为 人 性 化 的 界面 。 在 这 个 
界面 中 ,使 用 者 可 以 简单 地 通过 单 击 来 确定 自己 所 需 填写 的 日 期 和 时 间 类 型 ,而 不 用 去 管 具 
体 的 格式 设置 。 
type 属性 为 datetime-local 的 输入 控件 所 输入 的 格式 为 YYYY-MM-DDTHH: mm, 包 
括 日 期 和 时 间 , 二 者 通过 符号 *“T" 进 行 区 分 。 例 如 ,用 户 通 过 操作 选择 了 2017 年 10 月 7 日 
12 : 00, 则 实际 上 该 控件 的 最 终 输入 值 为 “2017-10-07T12 : 00", 
type 属性 为 date 的 输入 控件 所 输入 的 格式 为 YYYY-MM-DD, 为 日 期 输入 。 类 似 地 ,用 户 
通过 浏览 器 所 提供 的 界面 选择 了 2017 年 10 月 7 日 .输入 控件 的 实际 设 定 值 为 *2017-10-07”。 
type 属性 为 time 的 输入 控件 所 输入 的 格式 为 HH : mm, 为 时 间 输 入 。 例 如 ,用 户 选 择 
T 14: 30 这 个 时 间 ,输入 控件 的 实际 设 定 值 为 "14 : 30”。 
type 属性 为 month 的 输入 控件 所 输入 的 格式 为 YYYY-MM ,为 月 份 输入 , 指 年 月 。 例 
如 ,用 户 选 择 了 2017 年 的 10 月 , 则 控件 所 最 终 设 定 的 输入 值 为 "2017-10”。 尽 管 在 浏览 器 
所 提供 的 界面 中 ,用 户 实际 选择 的 是 具体 的 某 一 天 ,但 该 控件 的 输入 值 只 具体 到 月 份 。 
type 属性 为 week 的 输入 控件 所 输入 的 格式 为 YYYY-WWW ,为 周 数 输入 , 指 一 年 的 
第 几 周 。 例 如 ,用 户 选择 了 2017 年 10 H 7 日 , 则 控件 的 最 终 输 入 为 “2017-W40”, 尽 管用 户 
选择 的 是 具体 的 某 一 天 ,浏览 器 还 是 会 将 输入 值 换算 为 一 年 的 第 几 周 。 


2.4 新 表单 元 素 


除了 2.3 节 中 讲解 到 的 新 输入 控件 外 ,HTML5 还 提供 了 额外 的 表单 元 素 , 来 让 表单 的 
填写 过 程 更 加 可 视 化 .人 性 化 。 本 节 中 的 新 表单 元 素 主 要 有 输入 建议 .进度 条 和 计量 条 。 它 
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们 都 为 表单 的 填写 者 提供 了 更 为 友好 的 界面 ,让 用 户 的 填写 过 程 更 加 便利 。 下 面 分 别 通过 
实例 介绍 这 几 个 新 表单 元 素 。 


1. 输入 建议 
新 的 < datalist > 元 素 ,可 以 为 简单 的 单行 文本 输入 提供 输入 建议 , 当 用 户 输入 开始 的 某 


几 个 字母 时 ,浏览 器 就 会 主动 地 将 可 能 备 选 的 输入 通过 下 拉 框 的 方式 提供 给 用 户 , 供 其 参 
考 。 在 下 面 这 个 实例 中 ,用 户 可 以 在 表单 中 的 输入 框 输入 自己 的 母语 ,在 输入 的 过 程 中 ， 
< datalist > 元 素 便 会 给 用 户 一 些 适当 的 输入 建议 。 该 实例 在 浏览 器 中 的 展示 效果 如 图 2.9 


所 示 。 
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2.9 输入 建议 


文件 名 : 输入 建议 . html 


«! DOCTYPE HTML > 
<html lang = "en - US" 
<head> 
< meta charset = "UTF — 8"> 
«title»«/title» 
</head> 
< body> 
< form action = "" method = "post"> 
<fieldset > 
< legend> 你 的 母语 是 ?</legend> 
< label for = "lan"> 语 言 </label > 


< input type = "text" list = "languange" name = "lan"/> 
< datalist id= "languange"» 
<option value = "Arabic" label = "阿拉 伯 语 "></option> 
< option value = "Chinese"> 汉 语 </option> 
< option value = "English"> 英 语 </option> 
< option value = "Russian"> 俄 语 </option> 
< option value = "Spanish"> 西 班 牙 语 </option> 
< option value = "French"> 法 语 </option > 
</datalist> 
< input type = "submit" value = "提交 "/> 
</fieldset > 
</form> 
</body> 
</html> 


输入 建议 元 素 本 质 上 是 将 一 组 可 能 的 输入 项 添加 到 < datalist > 元 素 并 与 相应 的 输入 框 
绑 定 , 接 下 来 就 由 浏览 器 实现 在 输入 过 程 中 为 用 户 提 示 备 选 的 选项 。 类 似 于 下 拉 框 元 素 
< select >, 在 < datalist > 元 素 之 间 我 们 也 需要 添加 < option > 元 素来 指定 具体 的 每 个 备 选 数 
据 项 。 

一 个 输入 建议 元 素 需 要 首先 搭配 一 个 输入 框 来 使 用 ,只 需 将 输入 框 的 list 属性 设置 为 
< datalist > 的 id 值 即 可 完成 输入 框 与 输入 建议 的 绑 定 。 然 后 需要 在 < datalist > 元 素 之 间 加 
和 一 系列 的 < option > 标签 作为 备 选 的 输入 建议 的 数据 项 。 对 于 每 一 个 < option > 元 素 ,都 必 
须 有 一 个 与 其 对 应 的 输入 值 , 即 value 属性 。 除 此 之 外 ,还 可 以 设置 label 属性 ,该 属性 值 在 
具体 的 使 用 过 程 中 ,可 以 作为 提示 。 例 如 ,实际 的 输入 值 是 英文 的 "Arabic”, 但 是 该 < option > 
元 素 的 label 属性 被 设置 为 了 中 文 的 “阿拉 伯 语 ”。 在 < option > 标签 之 间 加 入 提示 信息 与 设 
L label 属性 的 效果 相同 。 

2. 进度 条 和 计量 条 

进度 条 和 计量 条 都 是 HTML5 新 的 表单 元 素 , 不 同 于 之 前 的 输入 控件 ,它们 更 多 的 时 
候 被 用 作 显示 控件 ,可 以 更 直观 地 显示 一 个 进度 的 占 比 或 是 一 个 事物 所 占 的 比例 。 进 度 条 
与 计量 条 十 分 相似 ,又 有 些许 不 同 。 下 面 通过 一 个 实例 讲解 这 两 个 元 素 。 该 实例 在 浏览 器 
中 的 展示 效果 如 图 2. 10 所 示 。 

文件 名 : 进度 条 和 计量 条 . html 


<! DOCTYPE HTML > 
<html lang= "en- US"> 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
< form action = "" method = "post"> 
< fieldset > 
< legend > 我 的 作业 </legend > 
< label for = "rank"> 完 成 进度 </label > 
< progress id= "rank" value = "88" max = "100"></progress > 


HN% 
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<br /> 
< label for = "score"> 分 数 </label > 
«meter id= "score" min- "0" max - "100" high- "85" low- "60" value = "90"> 
</meter > 
<br /> 
< input type = "submit" value = "提交 "/> 
</fieldset > 
</form> 
</body> 
</html> 


D 进度 条 和 计量 条 html  x 人 a 
| Qc [o fleVWEVHTMLS/HTMLS/HTML5/ 表 单 /进度 条 和 计量 条 .html 8) *| i 


























2.10 进度 条 和 计量 条 


使 用 < progress > 标签 ,可 以 为 一 个 表单 添加 一 个 进度 条 。 一 般 来 说 ,进度 条 的 作用 是 
反映 一 个 事情 的 进展 情况 ,同时 也 可 以 反映 一 个 百分比 占 比 状况 。 如 上 述 实例 使 用 
< progress > 元 素 时 ,需要 设置 max 属性 和 value 属性 ,来 规定 一 个 事物 的 上 限 与 其 本 身 的 
值 ,默认 < progress > 元 素 的 下 限 为 0, 这样 浏览 器 便 可 以 通过 这 两 个 信息 来 计算 占 比 ,并 绘 
制 进度 条 进行 可 视 化 显示 。 除 此 之 外 ,只 使 用 value 属性 也 可 以 达到 类 似 的 效果 ,只 不 过 这 
次 value 所 设置 的 属性 必须 用 一 个 0 一 1 的 小 数 来 代表 百分比 。 

与 < progress > 标签 类 似 ,< meter > 元 素 也 可 以 反映 出 一 个 事物 的 占 比 情况 ,但 它 可 以 
包括 更 多 的 细节 ,比如 设置 一 个 高 位 和 低位 ,然后 根据 该 标签 的 value 值 来 差别 显示 不 同 百 
分 比 。 首 先 需要 为 < meter > 标签 设置 min 和 max 属性 来 划 定 这 个 计量 条 的 度量 范围 ,然后 


设 定 该 < meter > 元 素 的 具体 值 , 即 value 属性 。 这 样 浏览 器 就 会 根据 value 属性 来 确定 元 素 
所 设 值 在 上 限 和 下 限 的 所 在 位 置 , 即 占 比 情 况 。 随 后 ,可 以 设置 更 多 的 属性 。high 属性 可 
以 为 这 个 计量 条 规定 一 个 高 值 ,相应 的 low 属性 可 以 为 计量 条 规定 一 个 低 值 , 超 过 high 值 
或 低 于 low 值 ,浏览 器 会 将 计量 条 设置 为 不 同 的 颜色 。 当 然 ,这 几 个 属性 要 满足 高 值 高 于 低 
值 且 二 者 均 落 在 min 值 和 max 值 之 间 。 此 外 ,还 可 以 为 < meter > 元 素 设置 一 个 优 值 , 即 设 
置 optimum 属性 值 ,尽管 value 属性 等 于 优 值 在 大 多 数 浏览 器 中 都 无 特定 的 样式 变化 ,但 这 
在 现实 应 用 中 可 能 是 一 个 重要 的 参考 信息 。 


2.5 新 表单 属性 


在 HTML5 中 新 增 了 许多 可 供 选 择 的 表单 属性 , autofocus、autocomplete 和 
placeholder 让 使 用 者 的 表单 填写 过 程 更 加 人 性 化 ,required 和 pattern 属性 为 开发 者 在 表单 
验证 环节 增添 了 便利 。 下 面 编写 一 个 简单 实例 ,并 逐一 介绍 这 几 个 新 的 属性 。 在 这 个 实例 
中 ,一 共有 两 个 输入 框 , 用 于 输入 姓名 和 电话 号 码 ,两 个 输入 框 均 为 必 填 项 目 , 其 中 电话 号 码 
的 输入 要 求 是 11 位 的 电话 号 码 。 在 用 户 打 开 表 单 时 ,网 页 会 先 聚 焦 于 第 一 个 输入 框 , 并 在 
用 户 填 写 的 过 程 中 向 用 户 提供 之 前 填写 过 的 数据 作为 参考 。 该 实例 在 浏览 器 中 的 展示 效果 
如 图 2. 11 所 示 。 











[8] 
/ D 新 表单 属性 .html x W 
CA [95 | © file/W/E/HTMLS/HTML5/HTML5/ 雪 单 /新 表单 属性 html 图 | i 








个 人 信息 


姓名 * : | 饮水 机 


电话 * : | 请 输入 11 位 的 手机 号 码 








E 
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文件 名 : 新 表单 属性 . html 


«! DOCTYPE HTML > 
<html lang = "en- US"> 
X head» 
< meta charset = "UTF - 8"> 
«title»«/title» 
</head> 
< body> 
< form action = "" method = "post"> 
< fieldset > 
< legend >f A fA E. «/1egend » 
< label for = "name"> 姓 名 * : </label > 
< input type = "text" id= "username" name = "name" required autofocus /> 
<br /> 
< label for = "telephone"> 电 话 * : </label > 
< input 
type = "tel" id = "telephone" required autocomplete = "on" placeholder - "请 输入 11 
位 的 手机 号 码 " pattern = "[0- 9](11)"/ 
<br /> 
< input type = "submit" value = "提交 "/> 
</fieldset > 
</form> 
</body> 
</html> 


1. 自动 焦点 autofocus 

在 < input > 的 标签 内 添加 autofocus 属性 后 ,每 当当 前 表单 页 面 被 打开 后 ,浏览 器 都 会 
自动 将 焦点 聚集 于 该 输入 控件 , 即 自动 选中 该 输入 控件 并 出 现 闪烁 光标 ,这 样 用 户 就 可 以 注 
意 到 这 里 ,并 准备 对 输入 框 所 要 求 选项 进行 填写 ,如 图 2.12 所 示 。 一 般 来 说 ,一 份 表单 中 只 
能 有 一 个 输入 控件 被 设置 autofocus 属性 , 若 多 于 一 个 , 则 浏览 器 将 会 以 第 一 个 为 准 。 

2. 自动 完成 autocomplete 

在 < input > 的 标签 内 添加 autocomplete 属性 后 ,浏览 器 就 会 为 该 输入 控件 提供 可 能 的 
参考 填写 数据 ,如 图 2. 13 所 示 ,这 些 数据 均 来 自用 户 之 前 对 同一 页 面 的 同一 输入 控件 的 填 
写 。 一 般 情 况 下 ,浏览 器 会 默认 全 部 输入 控件 都 具有 该 属性 。 需 要 通过 设置 autocomplete 
属性 值 为 on 或 off 来 控制 浏览 器 的 这 一 行为 。 

3. 输入 提示 placeholder 

在 < input > 的 标签 内 添加 placeholder 属性 后 , 便 可 以 为 单个 的 输入 框 添加 一 些 必 要 的 
提示 信息 ,比如 填写 信息 的 类 型 要求 等 ,如 图 2. 14 所 示 。 具 体 的 提示 信息 内 容 需 要 在 
placeholder 属性 后 添加 相应 的 属性 值 来 实现 。 这 样 开发 者 便 可 以 将 一 些 简 单 的 输入 提示 
信息 写 在 输入 框 中 来 传达 给 用 户 。 

4. 务必 填写 required 

在 < input > 标签 内 添加 required 属性 后 ,该 输入 控件 便 会 成 为 一 个 表单 中 的 必 填 项 , 若 
用 户 尚 未 完成 该 输入 框 的 填写 , 则 不 能 正常 地 完成 表单 的 提交 。 浏 览 器 会 给 用 户 反 馈 一 个 
错误 的 提示 信息 ,督促 用 户 完 成 相关 项 目的 填写 ,如 图 2. 15 所 示 。 通 过 设置 required 属性 ， 
开发 者 便 可 以 简单 地 完成 对 一 个 字段 的 判 空 验 证 。 















D resmen x VS 
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个 人 信息 
电话 * : | 请 输入 11 位 的 手机 号 码 | 
| 提交 | 
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图 2.13 autocomplete 属性 
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2.14 placeholder 属性 












































2.15 required 属性 


5. 正则 表达 式 匹 配 pattern 

除了 简单 的 判 空 验证 ,在 HTML 表单 相关 的 开发 过 程 中 ,最 常 遇 到 的 便 是 对 一 个 字段 
进行 格式 上 的 验证 ,比如 简单 的 电话 号 码 验 证 .邮箱 地 址 格式 验证 等 。 这 时 需要 在 < input > 标 
签 中 设置 pattern 属性 ,并 利用 正则 表达 式 设置 pattern 属性 值 ,来 对 输入 控件 中 的 字段 进 
行 匹配 验证 ,成功 完成 匹配 方 可 提交 表单 ,否则 终止 提交 表单 。 

所 谓 正 则 表达 式 (Regular Expression) ,是 对 字符 串 操 作 的 一 种 逻辑 公式 ,就 是 用 事先 
定义 好 的 一 些 特 定 字符 及 这 些 特定 字符 的 组 合 组 成 一 个 模式 (pattern)。 使 用 这 个 模式 可 
以 完成 一 些 字 符 串 的 匹配 和 过 滤 工 作 。 例 如 下 面 的 工作 。 从 英语 词典 中 筛选 出 词尾 
为 ”-ity” 的 单词 ,或 是 从 网 站 的 评论 内 容 中 筛选 出 不 友善 的 词汇 等 。 我 们 可 以 把 正则 表达 式 
理解 为 一 个 语法 ,规定 一 种 字符 的 组 合 模式 ,并 根据 这 个 设 定 的 模式 去 完成 筛选 和 过 滤 的 相 
关 工 作 。 

当然 ,正则 表达 式 涵盖 了 许多 内 容 ,限于 篇 幅 ,不 能 详细 地 介绍 其 原理 和 应 用 。 在 此 ,只 
能 对 本 节 实 例 所 涉及 的 正则 表达 式 进 行 讲解 。 其 中 “[0-9]” 代 表 0 一 9 的 全 部 数字 ;“{11}” 
代表 前 一 个 字符 的 重复 次 数 , 在 实例 的 语 境 下 就 是 11 位 任意 组 合 的 数字 , 即 代表 11 位 的 手 
机 号 码 , 如 图 2. 16 所 示 。 有 兴趣 的 读者 可 以 进一步 学 习 正则 表达 式 ,来 设计 一 个 实际 意义 
更 强 的 匹配 模式 。 
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个 人 信息 

姓名 * : 2 
电话 * : 
提交 


























Hi 请 与 所 请 求 的 格式 保持 一 致 . 








图 2.16 pattern 属性 
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2.6 3] 题 


1. 简 述 HTML 表单 在 Web 应 用 中 所 扮演 的 角色 。 

2. HTML 表单 中 的 数据 项 是 怎样 被 传送 到 服务 器 端的 ? 服务 器 端 又 是 通过 何 种 方式 
获取 到 表单 中 数据 的 ? 

3. 利用 本 章 所 学 的 HTML5 表单 元 素 构 建 一 个 调查 问卷 ,调查 的 题材 可 以 自行 拟定 ， 
但 需要 尽 可 能 多 地 覆盖 本 节 中 所 涉及 的 表单 元 素 。 

4. 试 着 为 第 3 题 中 的 调查 问卷 添加 一 些 CSS 样式 ,使 表单 看 上 去 不 那么 简陋 ,着重 调 
整 表单 信息 的 对 齐 方式 。 

5. 本 章 所 介绍 的 表单 实例 与 浏览 器 的 种 类 相关 ,不 同 的 浏览 器 会 有 不 同 的 默认 展示 效 
果 。 请 读者 自行 在 网 络 中 检索 ,浏览 器 默认 的 各 种 控件 的 展示 效果 是 否 可 以 改变 ,或 者 说 这 
些 形形色色 的 控件 是 通过 何 种 方式 成 为 我 们 在 浏览 器 中 所 看 到 的 样子 ( 即 这 些 控 件 本 身 具 
有 的 CSS 样式 与 JavaScript 3£ 48) 。 

6. 深入 学 习 正 则 表达 式 , 简 述 它 在 实际 应 用 中 的 作用 ,并 编写 一 个 HTML 表单 来 实现 
一 个 不 同 于 本 节 实 例 的 模式 匹配 。 





第 3 章 语义 化 标签 





HTML 文档 中 的 标签 其 实 大 多 数 都 是 具有 语义 性 的 ,比如 < table > 标签 表示 表格 、 
< img > 标签 表示 图 像 (image) .< p > 标签 表示 段落 (paragraph) 等 。 然 而 在 页 面 整体 的 布局 
上 ,互联 网 上 大 量 的 网 页 都 选择 了 < div > 标签 。< div > 标签 内 添加 id 与 class 后 ,就 很 容易 
为 相应 区 域 添加 CSS ,进行 布局 和 样式 设置 。< div > 标签 本 身 含义 十 分 简单 ,就 是 一 个 分 块 
分 区 (division) 的 逻辑 标签 。 无 论 是 编写 还 是 调试 ,其 效果 与 过 程 都 非常 简洁 直观 。 

然而 , HTML5 标准 提出 了 一 个 新 的 编写 模式 一 一 语义 化 标签 元 素 (semantic 
elements) 。 它 试图 突破 原来 大 量 使 用 的 < div > 标签 ,在 网 页 的 各 个 分 区 模块 中 ,概括 出 模 
块 的 作用 与 意义 ,进而 提高 人 与 机 器 对 HTML 文档 的 可 读 性 。 


3.1 HTMLS 之 前 的 语义 化 标签 


虽然 我 们 常常 将 语义 化 标签 作为 HTML5 的 主要 特性 之 一 ,但 需要 注意 的 是 ,在 
HTML5 之 前 许多 的 标签 都 是 有 语义 作用 的 ,就 像 前 面 所 说 的 < table > 标签 ,以 及 其 所 涉及 
的 其 他 表格 相关 标签 都 是 有 很 高 的 语义 成 分 的 。 请 看 如 下 的 表格 实例 。 其 在 浏览 器 中 的 展 
示 效 果 如 图 3. 1 所 示 。 

文件 名 : HTML5 之 前 的 语义 化 标签 . html 


<! DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF - 8"> 
<title> 同 学 们 到 底 爱 不 爱 狗 子 </title> 
</head> 
<body> 
<table> 
<tr> 
<th> 班 级 </th> 
<th > 喜欢 狗 子 的 人 </th> 
<th > 不 喜欢 狗 子 的 人 </th> 
</tr> 
<tr> 
<td> 一 班 </td> 
<td> 20 </td> 
<td>5</td> 
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</tr> 
<tr> 
<td> 二 班 </td> 
<td> 30 </td> 
<td>0</td> 
</tr> 
</table> 
</body> 
</html> 





> G [o file;///F./wamp/www/semantic9620web/table.html 








班级 喜欢 狗 子 的 人 不 喜欢 狗 子 的 人 
一 班 20 5 
二 班 30 0 





3.1 HTML5 之 前 的 语义 化 标签 


表格 (table) 相 关 的 标签 由 < table >,< tr >.< th > 和 < td > 等 组 成 。 其 中 ,< table > 本 身 
代表 一 个 表格 ,一 个 表格 是 由 一 行 行 的 表格 行 (table row) 组 成 , 即 < tr > 标签 。 这 些 表格 的 
每 一 行 又 是 由 一 个 个 单元 格 组 成 ,这 些 单元 格 由 一 个 个 < td > 标签 即 表格 数据 (table data) 
表示 。 显 然 , 表 头 (table head) 不 同 于 其 下 的 其 他 单元 格 数据 ,是 表 头 下 所 有 数据 的 分 类 与 
归纳 ,所 以 就 有 专门 的 表 头 元 素 代表 一 个 个 表 头 单元 , 即 < th > 标签 。 

类 似 地 ,语义 化 标签 当然 还 有 最 常见 的 一 些 , 如 < h > 标签 代表 标题 Cheader) .< p > 标签 
代表 段落 (paragraph) 等 ,可 以 说 ,所 有 的 标签 都 有 最 初 的 语义 应 用 。 毕 竟 ,HTML 文档 是 
用 英语 写成 的 ,标签 的 作者 不 能 凭空 创造 。 每 一 个 标签 都 是 有 其 背后 的 意思 的 ,当然 还 有 一 
些 标签 在 使 用 中 背离 了 创作 的 初衷 ,比如 < i > 标签 ,原本 的 意思 是 斜体 (italics)。 但 实际 应 
用 中 ,< i> 标 签 更 容易 想到 图 标 (icon) ,于 是 大 家 将 错 就 错 ,大 量 的 前 端 库 直 接 将 <i > 标签 指 
代 图 标 。 


既然 HTML 的 所 有 元 素 都 是 有 语义 性 的 , 那 我 们 在 说 到 HTMLS 语义 化 标签 时 讲 的 
是 什么 呢 ? 

尽管 HTML 的 所 有 标签 都 有 其 背后 的 含义 ,但 是 有 些 标签 的 含义 却 是 极其 抽象 的 。 
比如 < div > 标签 意思 为 分 区 (division) 。< span > 标签 意思 就 是 一 部 分 被 该 标签 横 跨 包括 的 
部 分 。 当 然 ,这 样 的 抽象 标签 给 了 前 端的 开发 者 极 大 的 自由 。 通 过 < div > 标签 ,人 们 只 需 简 
单 地 进行 秘 套 组 合 ,就 可 以 轻易 地 使 用 CSS 对 页 面 进 行 布局 的 设计 。 通 过 < span > 标签 ,只 
需 历 括 一 部 分 文本 ,就 可 以 对 这 部 分 文本 随心 所 欲 地 添加 样式 了 。 可 以 看 出 ,抽象 化 的 标签 
虽然 淡化 了 语义 的 成 分 , 却 十 分 自由 灵活 。 


3.2 语义 化 标签 的 作用 


抽象 化 的 标签 带 来 的 自由 当然 是 有 代价 的 ,虽然 可 以 灵活 地 设计 < div > 的 嵌 套 关系 以 
及 < span > 的 使 用 。 但 到 最 后 ,我 们 往往 会 发 现 自己 陷入 了 一 片 < div > 和 < span > 的 海洋 。 
这 样 的 HTML 代码 十 分 凌乱 ,不 适合 开发 人 员 进 行 调试 和 维护 。 同 样 , 搜 索引 擎 也 无 法 清 
晰 地 理解 大 量 的 没有 具体 含义 的 < div >, 进 而 就 不 能 让 网 站 被 更 多 的 人 发 现 并 浏览 。 
于 是 语义 化 标签 就 有 了 其 存在 的 现实 意义 ,并 且 不 止 于 搜索 引擎 。 总 的 来 说 ,语义 化 标 
签 的 作用 有 以 下 几 点 : 
。 为 构成 HTML 文档 结构 的 块 级 元 素 添加 语义 性 ,使 HTML 文档 的 结构 更 具 逻 辑 
性 、 更 为 具体 化 ,便于 开发 人 员 的 阅读 与 维护 。 
。 让 机 器 更 为 轻易 地 读 懂 HTML 文档 ,为 SEO( 即 搜索 引擎 优化 ) 提 供 便利 
。 使 HTML 文档 具有 更 高 的 可 访问 性 。 随 着 科技 的 进步 ,视觉 障碍 人 士 也 可 以 通过 
读 屏 器 或 者 是 盲文 显示 屏 来 访问 并 浏览 网 页 。 请 义 化 标签 的 使 用 可 以 让 页 面 更 好 
地 被 机 器 识别 ,进而 能 够 让 视觉 障碍 人 十 更 好 地 浏览 和 理解 网 页 内 容 。 





3.3 HTMLS 新 的 语义 化 标签 


HTML5 所 推荐 的 语义 化 标签 主要 有 如 下 几 个 : 


< header >,< nav »,« nain »,« section >,< aside »,« article »,« footer »,« details »,« summary >, 

< figure »,«figcaption»,« mark > 
其 中 ,< header >,< nav >,< main >,< section >,< aside >,< article >,< footer > 这 些 元 素 可 以 
归 为 语义 化 的 块 级 元 素 ,它们 可 以 更 好 地 胜任 一 些 < div > 元 素 的 工作 。 而 < details > 和 
< summary > 搭配 使 用 则 表示 可 展开 的 细节 信息 。< figure > 和 < figcaption > 与 < img > 的 结 
合 则 能 够 更 为 具体 地 展示 图 片 , 使 图 片 不 仅仅 是 < img >, 还 可 以 有 图 片 本 身 的 标题 或 说 明 。 
< mark > 标签 高 亮 显示 文本 中 的 一 部 分 。 

下 面 详 细 介绍 它们 。 


3.3.1 语义 化 块 级 元 素 


< header >.< nav >,< main >,< section >,< aside >,< article >,< footer > 是 HTML5 请 
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义 化 标签 中 的 块 级 元 素 标签 ,每 个 标签 都 可 作为 

























































































HTML 文档 布局 中 的 常见 部 分 ,如 图 3. 2 所 示 。 语 义 pa 
化 的 标签 能 够 让 开发 者 和 搜索 引擎 更 好 地 理解 网 页 的 E 
页 面 结构 。 一 一 一 
1. < header > T 
< header > 标签 通常 指 代 标 题 区 域 , 不 同 于 < hl > 到 <article> 
« h6 > 指 代 文 本 中 不 同等 级 的 标题 ,< header > 标签 表明 <aside> 
了 一 个 标题 所 构成 的 区 域 。 这 个 区 域 可 以 是 网 站 的 名 qum 
字 或 图 标的 显示 ,如 常见 的 一 些 网 站 都 有 这 样 一 个 图 标 EM 
来 显示 站 点 的 名 称 , 如 图 3. 3 所 示 。 E 
当然 ,< header > 本 身 也 可 以 组 套 于 其 他 的 块 级 元 





素 内 ,灵活 地 表示 一 个 标题 域 ,便于 开发 者 自由 地 为 其 图 3.2 语义 化 块 级 元 素 
添加 CSS 样式 。 


Bgm 科学 人 小 8 PS MOOC EF PETE 其 他 





图 3.3 <header> 


2. <nav> 
< nav > 标签 指 代 的 就 是 网 站 的 导航 (navigation) 区 域 ,这 里 陈列 着 到 达 站 点 内 各 个 角落 
的 超级 链接 ,通过 导航 栏 , 浏 览 者 就 可 以 顺利 地 获取 一 个 网 站 所 提供 的 全 部 资源 ,如 图 3. 4 
所 示 。 
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图 3.4 «nav» 


3. < main > 

X main > 标签 内 通常 就 是 一 个 网 站 的 某 一 页 面 内 的 主体 部 分 ,可 以 说 其 中 包含 了 每 一 
个 页 面 的 主要 内 容 。 

4. < section > 

< section > 标签 ,直接 就 可 以 译 为 "部 分 ”, 即 对 页 面 内 逻辑 平行 且 独 立 的 各 个 部 分 进行 
展示 ,如 图 3.5 所 示 。 

5. < article? 

< article > 标签 , 即 为 具体 的 文章 ,文本 内 容 , 它 表示 一 个 区 域内 的 具体 内 容 。 它 可 以 是 
新 闻 中 的 一 篇 具体 文章 ,也 可 以 是 论坛 中 的 一 个 发 帖 或 回复 等 ,如 图 3.6 所 示 。 
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3.5 <section> 


HTMLS FEATURES 
SEMANTICS 


Semantics is one of the most distinctive features of the Web Platform versus 
other application platforms. Developers usually ignore or de-prioritize such 
feature but the mastery of it can bring many benefits to our projects. 


The Web is text and text has a meaning. 
Ultimately the content that our browsers 
read is pure text. Web sites and web 


the easier will be for the rest of the agents 
to deal with it. HTMLS provides a series of 
tools to make developers life easier too: 


applications have been created in an = New media elements. 
ecosystem where text based content is 
linkable. searchable and mashable. In the 
open web scenario our content can be 
shown, fed and remixed by third parties. 
search engines and accessibility tools. All 
these benefits don't come for free. 
Automated tools can only do half of the job 
at recognizing the nature of the content. 
The better job the developer does at 

Tweet marking the right semantics of the content 


New structural elements. 


New semantics for internationalization. 


New link relation types. 


New attributes. 


New form types. 


New microdata syntax for additional 
semantics. 











3.6 «article? 


6. « aside? 

< aside > 标签 ,通常 表示 主要 内 容 之 外 的 区 块 元 素 , 比 如 侧 边栏 。 日 常 浏览 网 页 中 的 广 
告 或 是 侧 边栏 目录 都 可 以 作为 < aside > 元 素 , 如 图 3. 7 所 示 。 

7. < footer > 

< footer > 标签 定义 文档 或 节点 的 页 脚 , 它 一 般 位 于 HTML 文档 的 末尾 或 是 某 一 部 分 
的 末尾 。 页 脚 通常 包含 文档 的 作者 ,版权 信息 、 使 用 条 款 链 接 .联系 信息 等 ,如 图 3. 8 所 示 。 

下 面 这 个 实例 将 结合 上 面 的 几 个 语义 化 块 级 元 素 ,构造 一 个 典型 的 新 闻 类 型 网 站 布局 ， 
该 实例 包含 两 个 文件 ,分 别 是 HTML 文档 semantic. html 及 其 对 应 的 CSS 文档 style. css, 
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其 在 浏览 器 中 的 展示 效果 如 图 3. 9 所 示 。 
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图 3.7 <aside> 








本 网 站 属 非 译 利 性 质 ， 旨 在 传播 马克 思 主 义 和 共 产 主义 历史 文献 和 参考 资料 * 凡 刊登 的 著作 文献 食 犯 了 作者 、 译 者 或 版 权 持 有 人 权益 的 ， 可 来 信 联 系 本 站 删除 * 
阅读 本 站 资料 时 ， 如 发 现 文字 错 油 或 疑点 ， 茹 请 读者 吉 知 文库 ， 以 便 我 们 更 正 。 深 表 感 谢 ! 
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3.8 <footer> 


c | © file;//F./wamp/www/semantic9620web/semantic.html 


i 
冷 知识 
这 里 有 你 不 知道 的 冷 知识 

主页 关于 联系 我 们 假装 这 里 也 有 假装 这 里 还 有 


教育 别 看 段子 了 ， 








邻居 大 他 说 美国 的 教育 就 是 好 ， 人 
家 3 岁 的 小 孩子 都 会 说 一 口 流利 的 英 
语 。 反 观 我 们 国家 ，6 岁 了 才刚 刚 能 
用 英语 数 数 。 

















据 德国 科学 家 研究 得 出 结论 ， 一 个 
成 年 男子 每 吸烟 60 秒 就 会 减少 一 分 
钟 的 寿命 。 


EZ TEMES ,如果 我 起， 可 以 这 么 写 一 一 一 版 权 所 有 ， 仿冒 必 完 。 尽 管 侦 子 是 我 抄 的 





图 3.9 语义 化 块 级 元 素 实例 页 面 


文件 名 : semantic. html 


<! DOCTYPE HTML > 
< html lang = "en — US"> 


<head> 
«meta charset = "UTF - 8"> 
<title> 冷 知识 网 </title> 
< link rel = "stylesheet" href = "style. css" /> 
</head> 
<body> 
<header> 
<hl> 冷 知识 </hl > 
<p> 这 里 有 你 不 知道 的 冷 知 识 </p> 
</header > 
<nav> 
<ul> 
<li><a href =" 间 "> 主页 </a></1i> 
<li><a href 2 " 4 "»X-F«/a»«/li» 
<li><a href =" 井 "> 联系 我 们 </a></1i> 
<li><a href =" # "> 假装 这 里 也 有 </a></1i> 
<li><a href = " # "> 假装 这 里 还 有 </a></1i> 
</ul> 
</nav > 
<main> 
«section» 
< h2 > 教育 </h2 > 
«article» 


<p> 邻 居 大 和 爷 说 美国 的 教育 就 是 好 , 人 家 3 岁 的 小 孩子 都 会 说 一 口 流利 的 英语 。 


反观 我 们 国家 ,6 岁 了 才刚 刚 能 用 英语 数 数 。 
</p> 
</article> 
</section > 
< section? 
< h2 > 健康 </h2 > 
«article» 


<p> 据 德国 科学 家 研究 得 出 结论 ,一 个 成 年 男子 每 吸烟 60 秒 就 会 减少 一 分 钟 的 寿 


命 。</p> 
</article> 

</section> 
</main> 
<aside> 

< h2 > 别 看 段子 了 ,看 我 </h2 > 

<p> 看 看 ,这 里 有 一 个 广告 … 最 新 的 产品 只 要 998!!</p> 
</aside> 
<footer> 


这 是 一 个 页 脚 信 息 ,如 果 我 想 ,可 以 这 么 写 一 一 版 权 所 有 ,仿冒 必 究 。 尽 管 段 子 是 我 抄 的 


</footer > 
</body> 
</html> 
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文件 名 : style. css 


article, aside, footer, header, main, nav, section( 
display: block; 


body( 
margin:20px 20px 20px 20px; 
padding - left:40px; 
) 
li( 
display: inline; 
font- size: 15px; 
font - weight: bold; 
) 
at 
margin- left: Opx; 
$ 
section{ 
width:250px; 
margin- top: 10px; 
) 
main( 
float:left; 
} 
aside{ 
width:150px; 
float:right; 
padding - right :50px; 
L 
footer( 
clear:both; 
padding - top:20px; 
font - size:l0px; 
text - align:center; 
) 


上 面 这 个 简单 的 实例 利用 语义 化 块 级 元 素 标签 构造 了 一 个 十 分 丑陋 的 页 面 ,但 简单 分 
析 一 下 HTML 文档 代码 ,可 以 发 现 语义 化 标签 的 优势 , 即 文 档 的 结构 十 分 清晰 。 上 述 实 例 
的 块 级 元 素 结构 ,基本 上 是 按照 本 节 中 的 图 示 布 局 的 。 相 应 的 CSS 文件 为 页 面 添 加 了 风格 
样式 ,使 页 面 不 至 于 那么 朴素 。 同 时 需要 注意 的 是 ,HTML 代码 中 的 < a > 标签 内 以 “#?” 符 
号 来 代替 可 能 的 超级 链接 。 

虽然 上 面 的 这 个 实例 十 分 简单 ,但 细心 的 读者 是 否 感觉 似曾相识 。 没 错 , 现 实生 活 中 的 
许多 信息 展示 类 网 站 的 布局 与 其 是 十 分 相似 的 。 许 许多 多 的 网 站 都 同 这 个 实例 页 面 一 样 ， 
有 一 个 大 标题 作为 自己 站 点 的 名 称 或 Logo 展示 ,一 个 导航 栏 来 帮助 浏览 者 在 站 点 内 跳 转 ， 
文章 的 主体 部 分 显示 主要 信息 ,一 个 或 多 个 侧 边栏 来 展示 广告 ,最 后 一 个 页 脚 标注 站 点 的 版 
权 或 是 联系 信息 等 。 由 此 也 可 以 看 出 上 述 语义 化 标签 的 组 合 基本 能 够 涵盖 现实 中 大 量 的 网 
站 布局 模式 ,可 以 避免 大 量 使 用 < div > 标签 。 


3.3.2 «details > 和 < summary > 


< details > 标签 和 < summary > 标签 需要 搭配 在 一 起 使 用 ,这 两 个 标签 的 组 合 表示 一 段 
可 以 显示 或 隐藏 的 特定 信息 details 的 意思 为 细节 或 详情 ,summary 意思 为 概括 。 结 合 二 
者 的 语义 ,不 难看 出 它们 组 合 所 表示 的 是 一 个 可 显示 或 隐藏 的 详细 信息 ,从 页 面 上 可 以 直接 
看 到 这 段 详情 的 概括 ,只 有 单 击 才能 查看 其 内 部 所 隐藏 的 细节 详情 。 

下 面 这 个 实例 以 < details > 和 < summary > 的 组 合 形式 ,介绍 了 火星 与 水 星 的 概况 。 其 
在 浏览 器 中 的 展示 效果 如 图 3. 10 所 示 。 


口 details 和 summary x 





c | © file:///F./wamp/www/semantic%20web/details.html 








vY k= 

KÆ ( 英语 : Mercury , 拉丁 语 : Mercurius ) 是 太阳 系 八大 行星 最 内 侧 也 是 最 小 的 一 颗 行星 ， 也 是 
离 太阳 最 近 的 行星 。 符 号 为 %》， 中 国 称 为 辰 插 ， 有 着 八大 行星 中 最 大 的 轨道 偏心 率 。 它 每 87.968 个 
地 球 日 绕 行 太阳 一 周 ， 而 每 公转 2.01 周 同时 也 自转 3 圈 。 


> 火星 





图 3.10 < details > 和 < summary > 


文件 名 : details. html 


<! DOCTYPE HTML > 
< html lang = "en- US" 
<head> 
< meta charset = "UTF — 8"> 
<title> details 和 summary </title> 
</head> 
<body> 
«details» 
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< summary> 水 星 </summary> 
<p> 水 星 (英语 : Mercury, 拉丁 语 : Mercurius) 是 太阳 系 八 大 行星 最 内 侧 也 是 最 小 的 一 颗 行 
星 , 也 是 离 太 阳 最 近 的 行星 。 符 号 为 革 ， 中 国 称 为 辰 星 , 有 着 八大 行星 中 最 大 的 轨道 偏心 率 。 它 每 
87.968 个 地 球 日 绕 行 太阳 一 周 ,而 每 公转 2.01 周 同时 也 自转 3 E. </p> 
</details> 
<details> 
< summary >k Œ </summary> 
<p> 火 星 (Mars) 是 太阳 系 八 大 行星 之 一 ,天 文 符 号 是 全 ,是 太阳 系 由 内 往外 数 的 第 四 颗 行 
星 , 属 于 类 地 行星 ,直径 约 为 地 球 的 53 * ,自转 轴 倾 角 、 自 转 周 期 均 与 地 球 相近 ,公转 一 周 约 为 地 球 公 
转 时 间 的 两 倍 。 橘 红色 外 表 是 地 表 的 赤 铁 矿 ( 氧 化 铁 ) .我 国 古书 上 将 火星 称 为 “ 荧 惑 "西方 古代 ( 古 
罗马 ) 称 为 “战神 玛 尔 斯 星 ”。</p> 
</details> 
</body> 
</html> 


运行 实例 ,可 以 看 到 < details > 和 < summary > 组 合 在 页 面 中 只 显示 < summary > 标签 内 
的 文本 ,而 当 单 击 该 文本 后 , 则 可 以 看 到 与 < summary > 标签 平行 且 同 样 处 于 < details > 标签 
内 的 文本 信息 。 通 过 这 两 个 标签 的 组 合 , 可 以 在 页 面 内 显示 一 些 详 情 类 信息 , 供 有 需要 的 浏 
览 者 单 击 阅读 。 
3.3.3 <figure> 和 < figcaption > 


< figure > 标签 代表 一 段 独立 的 内 容 , 经 常 与 说 明 (caption)< figcaption > 标签 配合 使 用 ， 
并 且 作 为 一 个 独立 的 引用 单元 。figure 的 本 意 即 为 图 片 或 图 表 。 这 个 标签 经 常用 于 文中 引 
用 图 片 .插图 .表格 .代码 段 等 。 

下 面 的 这 个 实例 使 用 了 < figure > 标签 和 < figcaption > 标签 来 展示 一 个 图 片 与 该 图 片 所 
对 应 的 说 明 。 实 例 在 浏览 器 中 的 展示 效果 如 图 3. 11 所 示 。 

文件 名 : figure. html 


<! DOCTYPE HTML > 
<html lang = "en - US"> 
< head> 
< meta charset = "UTF - 8"> 
«title» figure </title> 
</head> 
< body> 
< figure> 
< ing src = "dog. jpg" /> 
<figcaption > 图 片 1. 一 个 帅气 的 狗 子 </figcaption > 
</figure> 
</body> 
«/htnl > 


在 浏览 器 中 运行 实例 ,可 以 看 到 在 < figure > 标签 内 的 < img > 标签 和 < figcaption > 标签 
自动 组 合 到 了 一 起 ,构成 了 一 个 图 片 与 其 对 应 的 说 明 。 











图 片 1. 一 个 帅气 的 狗 子 





图 3.11 «figure» 


3.3.4 «mark» 


< mark > 标签 表示 一 段 高 亮 显示 的 文字 ,就 像 日 常 学 习 中 做 笔记 用 的 马克 笔 一 样 ,将 文 
章 段落 中 的 一 段 涂 上 不 同 的 颜色 来 加 以 强调 。 与 该 标签 相对 的 是 HTML5 之 前 的 < span > 
标签 ,< span > 标签 本 身 并 没有 意义 , 它 通 常 被 用 来 在 HTML 文档 中 包括 一 段 文本 ,然后 再 
使 用 CSS 进行 样式 调整 。< mark > 标签 可 以 说 是 之 前 < span > 标签 高 亮 显 示 的 特例 化 实现 。 

下 面 的 这 个 实例 使 用 < mark > 标签 来 将 文本 中 重要 的 内 容 高 亮 显 示 , 其 在 浏览 器 中 的 
展示 效果 如 图 3. 12 所 示 。 

文件 名 : mark. html 


<!DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF — 8"> 
<title>mark</title> 
</head> 
<body> 
<p> 操 作 系统 是 管理 计算 机 < nark > 硬件 </mark > 与 <nark > 软件 </mark > 资源 的 计算 机 程序 ,同时 
也 是 计算 机 系统 的 内 核 与 基石 。</p> 
</body> 
</html> 
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操作 系统 是 管理 计算 机 硬件 与 软件 资源 的 计算 机 程序 , 同时 也 是 计算 机 系统 的 内 核 与 基石 。 





图 3.12 < mark > 


3.4 J — 8 


. 列举 你 所 知道 的 HTML 元 素 , 搜 索 一 下 这 些 元 素 的 英文 具体 指 代 什么 意思 。 

. 为 什么 要 有 语义 化 标签 ? 简 述 HTML5 之 前 的 元 素 有 哪些 不 足 。 

. 语义 化 标签 有 何 优势 ? 

- 利用 本 章 所 学 的 语义 化 块 级 标签 构造 一 个 静态 新 闻 类 网 站 。 

. 试 着 利用 本 章 中 所 介绍 的 其 他 语义 化 标签 元 素来 完善 第 4 题 中 的 静态 新 闻 类 网 站 。 
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第 4 章 音频 和 视频 





在 当今 互联 网 时 代 , 人 们 对 于 音频 和 视频 的 需求 无 疑 是 十 分 巨大 的 ,由 于 网 速 的 提升 ， 
人 们 得 以 通过 Web 获取 大 量 的 视频 和 音频 资源 ,曾经 加 载 图 片 都 需 几 分 钟 的 时 代 一 去 不 复 
返 了 。 如 今 ,我 们 可 以 自如 地 通过 网 络 听 音乐 .看 电影 ,也 可 以 实时 地 收听 广播 或 是 观看 视 
频 直 播 ,或 是 进行 视频 通话 。 我 们 这 些 需求 的 满足 ,一 方面 得 益 于 网 络 设备 性 能 的 提升 ,网 
速 可 以 支持 快速 大 规模 的 数据 传输 , 另 一 方面 也 离 不 开 Web 开发 中 音频 和 视频 标准 的 制 
定 。 这 些 标准 一 直 在 默默 地 为 互联 网 上 的 不 同 设 备 对 于 资源 的 自由 访问 做 着 贡献 。 本 章 将 
以 一 个 开发 者 的 角度 来 学 习 HTML5 的 视频 和 音频 标准 。 尽 管 互 联网 上 依然 有 很 多 音频 
和 视频 的 播放 依赖 于 插件 实现 ,但 是 HTML5 音频 和 视频 的 标准 的 应 用 趋势 是 不 可 否 
认 的 。 

音频 和 视频 对 于 很 多 人 而 言 并 不 陌生 ,从 使 用 者 角度 来 看 ,平日 里 在 电子 设备 上 听 的 歌 
曲 、 游 戏 中 的 各 种 音效 等 都 是 音频 ; 下 载 的 电影 ,网 上 看 的 直播 节目 等 都 是 视频 。 有 时 音 
频 、 视 频 是 一 个 个 可 以 直接 看 到 的 文件 ,比如 下 载 的 歌曲 和 电影 ,往往 有 着 各 自 的 格式 ,如 
MP3,MP4,WMA,MOV 等 。 有 时 音频 和 视频 是 一 个 个 隐藏 在 角落 里 的 文件 ,被 我 们 使 用 
的 其 他 软件 所 调用 播放 。 从 计算 机 的 角度 来 看 ,用 户 或 是 程序 对 音频 或 视频 的 播放 意味 着 
操作 系统 对 于 计算 机 音频 和 视频 相关 的 硬件 设备 的 访问 ,然后 将 音频 和 视频 资源 外 放 表现 
出 来 ,从 而 让 用 户 听 到 或 看 到 。 

作为 普通 用 户 我 们 可 能 无 须 更 多 地 关注 每 个 音频 和 视频 资源 的 格式 或 是 如 何 访问 ， 
因为 操作 系统 已 经 作为 一 个 标准 ,将 音频 资源 的 获取 和 播放 的 细节 封装 起 来 ,并 且 支 持 
大 部 分 的 编码 方式 。 我 们 只 需 即 点 即 播 , 即 点 即 暂停 。 但 作为 一 个 Web 开发 者 , HTML5 
的 标准 扮演 着 与 我 们 使 用 的 操作 系统 类 似 的 功能 .将 复杂 烦琐 的 系统 调用 硬件 的 细节 抽 
象 为 简洁 的 一 行 行 代 码 ,让 我 们 可 以 直接 地 对 于 音频 和 视频 资源 实现 相对 统一 而 简单 的 
访问 。 


4.1 Ë 5n 


4.1.1 <audio># € 


HTML5 规定 了 一 种 通过 audio 元 素来 访问 音频 的 方法 , 它 能 够 播放 声音 文件 或 音频 
流 。 我 们 只 需要 在 HTML 代码 中 添加 < audio > 标签 ,在 标签 内 指定 资源 位 置 ,就 可 以 简单 
地 实现 音频 的 访问 。 例 如 下 面 这 段 代 码 ,其 在 浏览 器 中 的 展示 效果 如 图 4.1 所 示 。 

文件 名 : audio. html 


HTMLS £ JJ ## 





<! DOCTYPE HTML > 
< html lang = "en — US"> 
<head> 
< meta charset = "UTF — 8"> 
<title> 音 频 的 播放 </title> 
</head> 
<body> 
< audio src = "bark. wav" controls = "controls"> 您 的 浏览 器 无 法 播放 这 段 音 频 </audio> 
</body> 
</html > 
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4.1 < audio > 标签 的 使 用 


在 上 面 的 这 段 代 码 中 ,我们 在 < audio > 标签 的 src 属性 中 指定 了 位 于 与 该 页 面 同 目录 
下 的 音频 文件 bark. wav, 并 且 设 置 controls 属性 为 controls ,这样 在 运行 HTML 网 页 后 就 
可 以 在 浏览 器 中 看 到 一 个 音频 状态 条 了 ,上 面 显 示 了 音频 的 时 长 .播放 暂停 按钮 ,以 及 音量 
条 控件 。 当 然 “controls 一 "controls"” 这 样 的 写法 有 些 麻 烦 , 类 似 这 样 设置 的 属性 可 以 直接 
在 标签 内 写 入 属性。 在 本 章 其 他 代码 中 ,依然 采用 复杂 的 写法 ,读者 在 自己 编写 代码 时 可 以 
自行 选取 习惯 的 方式 。 因 为 浏览 器 种 类 不 同 ,所 以 读者 在 运行 网 页 时 所 看 到 的 音频 控件 可 
能 与 实例 图 片 的 样子 不 同 ,但 它们 的 功能 是 相同 的 。 单 击 页 面 上 的 播放 按钮 就 可 以 听 到 这 
段 音频 资源 了 。 


4.1.2 音频 格式 兼容 


可 能 有 一 些 读者 用 与 前 文 类 似 的 办 法 添加 音频 资源 ,但 没有 听 到 自己 所 选取 的 音频 。 
这 很 可 能 是 因为 不 同 浏览 器 对 于 音频 格式 的 支持 差异 。 在 4. 1.1 节 的 代码 中 ,我 们 所 指定 
的 音频 资源 的 文件 名 为 bark. wav, 其 中 . wav 后 级 代表 了 这 段 音频 为 WAV 格式 。 音 频 的 
格式 有 很 多 种 ,常见 的 有 MP3、WAV、WMA 等 。 


1. 常见 音频 格式 简介 

1) MP3 

MP3 是 一 种 音频 压缩 技术 ,全 称 是 动态 影像 专家 压缩 标准 音频 层面 3(Moving Picture 
Experts Group Audio Layer IID ,简称 为 MP3。 利 用 MPEG Audio Layer 3 的 技术 ,将 音乐 
以 1:10 其 至 1: 12 的 压缩 率 ,压缩 成 容量 较 小 的 文件 ,由 于 压缩 后 音质 损失 很 少 且 音 频 文 
件 占用 空间 不 大 ,在 互联 网 时 代 伊始 就 被 广泛 使 用 。 

2) WAV 

WAV 格式 是 微软 公司 开发 的 一 种 声音 文件 格式 ,也 叫 波形 声音 文件 ,是 最 早 的 数字 音 
频 格式 ,被 Windows 平台 及 其 应 用 程序 广泛 支持 。 未 经 压缩 的 WAV 音频 文件 ,会 占用 较 
大 的 空间 ,但 能 够 保持 极 高 的 音质 ,并 广泛 地 被 专业 音乐 人 士 使 用 ,也 常常 用 来 作为 CD 唱 
片 的 音频 格式 。 尽 管 为 了 能 够 更 好 地 在 互联 网 上 传播 ,WAV 也 支持 压缩 算法 ,但 压缩 后 的 
文件 有 时 仍 会 占用 较 大 的 空间 。 

3) OGG 

Ogg 全 称 是 OGG VorbisCogg Vorbis) ,是 一 种 新 的 音频 压缩 格式 ,压缩 后 的 文件 大 小 
和 音质 类 似 于 MP3 等 现 有 的 音乐 格式 。 而 不 同 的 是 , 它 是 完全 免费 ` 开 放 和 没有 专利 限 
制 的 。 准 确 地 说 ,OGG 是 一 种 数据 流 “ 容 器 ”, 它 能 够 包含 多 种 格式 的 音 视频 ,并 且 开 源 
免费 。 

2. 浏览 器 对 不 同音 频 格式 兼容 情况 

不 同 的 格式 代表 了 不 同 的 音频 解码 方式 ,不 同 的 浏览 器 对 于 不 同 的 音频 格式 的 支持 程 
度 也 互 不 相同 。 对 于 某 些 格式 ,浏览 器 并 不 能 解析 并 进行 播放 ,可 能 造成 一 些 问 题 。 表 4.1 
展示 了 不 同 浏览 器 对 于 不 同音 频 格式 的 支持 情况 。 

表 4.1 浏览 器 对 不 同音 频 格式 兼容 情况 
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表 4. 1 给 出 了 从 某 一 版 本 开始 支持 以 上 相关 格式 ,现在 更 新 的 不 同 浏览 器 可 能 对 各 个 
格式 的 支持 度 有 所 增加 。 但 是 在 互联 网 上 ,成 千 上 万 的 用 户 使 用 的 并 不 是 最 新 版 本 的 浏览 
器 。 因 此 ,为 了 实现 跨 浏 览 器 平台 访问 资源 ,作为 开发 者 最 好 同时 准备 至 少 三 种 格式 的 相同 
音频 。 我 们 可 以 通过 一 些 音频 视频 解码 软件 获得 不 同 格式 的 音频 资源 。 下 面 介绍 < audio > 
标签 链接 多 个 音频 资源 作为 备用 的 播放 资源 。 

文件 名 : 多 个 音频 资源 作为 备用 . html 


<! DOCTYPE HTML > 

<html lang = "en- US"> 

<head> 
< meta charset = "UTF — 8"> 
<title> 音 频 的 播放 </title> 
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</head> 
<body> 
< audio controls = "controls"> 
< source src = "bark. wav" type = "audio/wav"></source > 
< source src = "bark. ogg" type = "audio/ogg"></source > 
< source src = "bark. mp3" type = "audio/mpeg"></source > 
«/audio» 
</body> 
</html> 
运行 后 的 效果 与 之 前 指定 单一 音频 资源 的 效果 一 样 , 不 同 的 是 ,在 这 段 代码 中 我 们 指定 
了 三 种 不 同 格式 的 音频 资源 作为 兼容 不 同 浏览 器 的 备用 资源 。 其 中 使 用 了 < source > 标签 ， 
在 标签 内 我 们 设 定 src 属性 为 音频 资源 路 径 , 设 置 type 属性 为 不 同 格式 的 相应 类 型 。 这 样 
就 实现 了 用 户 对 于 音频 资源 的 跨 浏览 器 的 兼容 访问 。 为 了 代码 的 简洁 ,在 之 后 的 实例 中 我 
们 不 使 用 备用 音频 资源 , 仅 以 单一 音频 作为 < audio > 标签 的 资源 。 


4.1.3 <audio > 标签 属性 


接 下 来 介绍 在 < audio > 标签 内 常用 的 属性 ,它们 分 别 是 autoplay preload 和 loop, 
autoplay 属性 的 作用 是 能 让 < audio > 标签 所 代表 的 音频 资源 在 页 面 完 成 加 载 之 后 自动 
播放 。 


< audio src = "bark. wav" controls = "controls" autoplay = "autoplay"></audio > 


preload 属性 的 作用 是 在 页 面 加 载 之 后 就 能 开始 载 人 音频 ,而 不 是 当 用 户 开始 单 击 播放 
后 再 载 和 人。 这 样 做 的 好 处 是 可 以 让 音频 资源 自动 加 载 ,在 用 户 单 击 时 就 可 以 直接 播放 而 不 
需 再 花费 额外 的 时 间 来 缓冲 。 但 是 设置 过 autoplay 属性 就 不 必 再 设置 preload 属性 了 , 因 
为 自动 播放 本 身 包 括 了 自动 加 载 。 


< audio src = "bark. wav" controls = "controls" preload = "auto"></audio > 


其 中 preload 属性 设置 成 的 auto, 意 味 着 当 页 面 加载 后 自动 载 和 整个 音频 。 这 个 属性 还 可 
以 设置 为 meta ,意味 着 当 页 面 加 载 后 只 载 人 音频 的 元 数据 ,如 音频 的 名 称 时 长 等 。 当 然 也 
可 以 设置 为 none, 同 时 这 也 是 preload 的 默认 设置 。 

loop 属性 的 作用 是 能 够 让 音频 播放 完成 之 后 重新 播放 , 即 < audio > 标签 下 的 音频 资源 
将 被 循环 播放 。 


< audio src = "bark. wav" controls = "controls" loop = "loop"></audio > 


4.1.4 <audio > 标签 方法 及 应 用 


可 以 注意 到 ,< audio > 标签 中 总 是 设置 了 controls 属性 ,让 浏览 器 给 我 们 一 个 界面 来 控 
制 音频 的 播放 ,这 个 界面 是 默认 的 ,由 不 同 浏览 器 各 自决 定 其 样式 。 当 然 也 可 以 通过 
JavaScript 设计 自己 的 播放 器 界面 。 下 面 的 实例 将 通过 简单 的 按钮 事件 来 定义 播放 器 界 
Wü. 为 了 尽 可 能 使 用 简单 的 方式 介绍 原理 ,我 们 通过 按钮 单 击 事件 来 使 用 播放 器 的 基本 功 


能 。 同 时 ,为 了 更 好 地 展示 播放 时 间 ,该 实例 更 换 了 时 长 更 长 的 音频 文件 。 该 实例 在 浏览 器 
中 的 展示 效果 如 图 4.2 所 示 。 





e | © filey//C:/Users/SONY/Desktop/HTML5/ 音 频 和 视频 图 女 | oU: 
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图 4.2 小 播放 器 
文件 名 : 小 播放 器 . html 


«! DOCTYPE HTML > 

< html lang = "en - US"> 

<head> 
< meta charset = "UTF - 8"> 
<title> 音 频 的 播放 </title> 

</head> 

<body> 
<p id= "time"></p> 
<audio id = "myAudio" src = "ambience. wav"></audio> 
< input type = "button" id= "playStop" value = "Play"/> 
< input type = "button" id = "volumeUp" value=" +" /> 
< input type = "button" id = "volumeDown" value = "- " /> 
< input type = "button" id= "loop" value = "Loop Off"/> 
<p id= "volumeValue"» «/p» 


< script» 
var audio = document. getElementById("myAudio"); // 获 取 音 频 对 象 
var time = document. getElementById("time"); // 通 过 p 标 签 内 容 表示 音频 时 间 


var volumeValue = document. getElementById("volumeValue"); 


var volume = 100; 
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var volumeUpBtn = document.getElementById("volumeUp"); // 分 别 获取 button 对 象 
var volumeDownBtn = document.getElementById("volumeDown"); 

var playStopBtn = document. getElementById("playStop"); 

var loopBtn = document. getElementById("loop"); 


var playStop = function(){ // 播 放 停止 键 函 数 
if (audio.paused == true)( 
audio. play(); 
}else{ 
audio. pause( ) ; 


) 
$ 
var volumeUp = function(){ // 音 量 增 大 
if (volume « 100)( 
audio.volume *- 0.1; 
volume *- 10; 
volumeValue. innerHTML = "音量 " + volume.toString() + " %"; 
) 
) 
var volumeDown = function()( // 音 量 减 小 
if (volume> 0){ 
audio. volume -= 0.1; 
volume -= 10; 


volumeValue. innerHTML = "音量 ”+ volume.toString() + " %"; 


) 
var loopSwitch = function()( 
if (audio.loop == false)( 
audio. loop = true; 
loopBtn. value = "Loop On"; 
}else{ 
audio. loop = false; 
loopBtn. value = "Loop Off"; 


} 

} 

// 媒 体 相关 事件 函数 

audio. onplaying = function(){ // 媒 体 正在 播放 时 事件 
playStopBtn. value = "Pause"; 

} 

audio. onpause = function(){ // 媒 体 暂 停 时 事件 
playStopBtn.value = "Play"; 

) 

audio.oncanplay = function()( // 媒 体 缓冲 可 以 播放 时 事件 


time. innerHTML = "播放 时 长 : " + Math.floor(audio.currentTime) + "/" + Math. 


floor(audio.duration); 
volumeValue. innerHTML = "音量 " + volume.toString() + " $"; 
) 
audio.ontimeupdate = function()( // 媒 体 时 间 更 新 时 事件 
time.innerHTML = "播放 时 长 : " + Math.floor(audio.currentTime) + "/" + Math. 
floor(audio. duration); 
) 
// 为 按钮 添加 事件 监听 
playStopBtn. addEventListener( 'click',playStop); 
volumeUpBtn. addEventListener( 'click', volumeUp); 
volumeDownBtn. addEventListener( 'click', volumeDown) ; 
loopBtn. addEventListener( 'click', loopSwitch); 
</script> 
</body> 
</html> 
上 面 这 个 实例 简单 地 模仿 了 < audio > 标签 中 controls 的 播放 控件 相关 功能 。 可 以 播放 
和 暂停 音频 ,可 以 调节 音量 ,也 可 以 设置 是 否 要 循环 播放 。 虽 然 代 码 有 些 长 ,但 都 是 由 一 些 
简单 的 功能 组 合 而 成 的 ,它们 分 别 是 播放 暂停 .音量 大 小 调节 ,是否 循环 、 播 放 时 间 显 示 。 
1. 播放 暂停 
这 段 代码 中 ,我 们 使 用 一 个 按钮 控件 来 控制 音频 的 播放 。 当 音频 未 播放 时 , 单 击 按钮 ， 
音频 开始 播放 ,并 将 按钮 内 显示 的 文字 由 Play 变 为 Pause。 当 音频 已 经 播放 时 , 单 击 按钮 ， 
音频 暂停 播放 ,并 将 按钮 内 的 文字 由 Pause 变 为 Play。 这 个 功能 的 实现 主要 依靠 三 个 部 分 : 
HTML 页 面 < body > 标签 内 添加 按钮 为 按钮 添加 事件 监听 以 及 媒体 相关 事件 监听 。 
HTML 页 面 中 的 < body > 标签 内 使 用 < input > 标签 定义 按钮 。 按 钮 内 文字 默认 显示 
Play, 即 加 载 页 面 之 后 ,音频 处 于 待 播放 状态 。 


< input type = "button" id = "playStop" value = "Play"/> 
为 了 能 够 对 按钮 做 出 响应 ,需要 在 JavaScript 代码 中 , 先 通过 按钮 的 id 获取 这 个 按钮 
对 象 。 


var playStopBtn = document.getElementById("playStop"); 


同时 ,为 了 能 够 对 音频 进行 相关 操作 ,应 先 获 取 所 添加 的 音频 对 象 。 


var audio = document. getElementById("myAudio"); // 获 取 音 频 对 象 

有 了 这 些 对 象 ,就 可 以 针对 它们 定义 相关 的 函数 了 。 然 后 ,为 播放 暂停 按钮 添加 按钮 单 
击 后 所 要 执行 的 函数 。 

var playStop = function(){ // 播 放 停止 键 函 数 


if (audio. paused == true){ 
audio. play(); 

Jelse( 
audio. pause( ) ; 


} 
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在 这 个 函数 中 , 先 判断 当 前 音频 对 象 的 属性 paused, 即 该 音频 对 象 是 否 处 于 暂停 状态 ， 
若 处 于 暂停 状态 ,就 调用 音频 对 象 的 play() 方 法 ,让 其 播放 ,否则 就 让 其 暂停 播放 ,调用 
pause() 方 法 。 最 后 ,把 这 个 播放 暂停 函数 与 按钮 绑 定 , 即 为 按钮 添加 事件 监听 , 当 按 钮 被 单 
击 时 触发 上 一 个 写 好 的 函数 。 





playStopBtn. addEventListener( 'click', playStop); 


完成 这 些 之 后 ,就 实现 了 按钮 控制 音频 播放 的 基本 功能 ,但 还 有 一 些 事情 要 做 ,还 应 保 
证 按钮 上 的 文字 提示 与 音频 播放 状态 相对 应 。 这 时 需要 媒体 本 身 的 事件 监听 来 实现 , 当 音 
频 播放 时 ,按钮 提示 Pause; 当 音 频 暂 停 时 ,按钮 提示 Play. 


audio. onplaying = function(){ // 媒 体 正在 播放 时 事件 
playStopBtn. value = "Pause"; 

} 

audio. onpause = function(){ // 媒 体 暂 停 时 事件 
playStopBtn.value = "Play"; 

1 


通过 之 前 所 获取 的 音频 对 象 分 别 添 加 onplaying 和 onpause 事件 响应 , 即 媒体 对 象 播放 
时 与 暂停 时 响应 事件 ,动态 地 改变 播放 和 暂停 按钮 内 的 文字 提示 。 

2. 音量 大 小 调节 

对 于 音量 大 小 的 调节 ,可 通过 两 个 分 别 代表 音量 的 增加 和 音量 的 减少 的 按钮 实现 。 同 
时 用 一 个 < p > 标签 来 显示 当前 音量 的 大 小 。 对 于 一 个 音频 对 象 来 说 ,音频 的 音量 大 小 的 属 
性 可 以 通过 其 volume 属性 来 获取 ,而 该 属性 的 值 要 求 是 一 个 0 一 1. 0 的 数值 ,所 以 在 这 个 实 
例 中 ,音量 以 百分比 的 形式 显示 ,在 每 次 增 大 或 减 小 音量 的 过 程 中 ,改变 音量 的 10%。 与 上 
一 个 功能 不 同 的 是 ,这 次 多 出 一 个 < p > 标签 需要 显示 音量 大 小 ,但 我 们 通过 的 是 相似 的 方 
法 获取 并 操作 < p > 对 象 。 同 时 ,多 用 了 一 个 变量 volume 来 显示 音量 的 当前 百分比 大 小 值 ， 
默认 赋值 为 浏览 器 默认 的 音量 大 小 即 100% 的 音量 。 与 上 一 个 功能 一 样 ,通过 给 按钮 添加 
事件 响应 函数 并 绑 定 的 方法 来 实现 音量 大 小 的 增加 和 减少 的 功能 。 


var volumeUp = function(){ // 音 量 增 大 
if (volume < 100)( 





audio. volume += 0.1; 
volume += 10; 
volumeValue. innerHTML = "音量 " + volume.toString() + " %"; 
) 
) 


var volumeDown = function()( // 音 量 减 小 
if (volume > O)( 
audio. volume -= 0.1; 
volume -= 10; 


volumeValue. innerHTML = "音量 " + volume.toString() + " &"; 


为 了 音频 在 一 开始 就 可 以 显示 音量 大 小 ,而 不 是 只 有 在 按钮 被 单 击 之 后 ,通过 音频 对 象 
的 oncanplay 事件 响应 , 即 音频 对 象 缓冲 至 可 以 播放 时 触发 事件 响应 。 


audio.oncanplay = function(){ // 媒 体 缓 冲 可 以 播放 时 事件 
time. innerHTML = "播放 时 长 : " + Math. floor (audio. currentTime) + "/" + Math. floor 
(audio. duration); 
volumeValue. innerHTML = "音量 " + volume. toString() + " $"; 
) 


在 这 个 事件 响应 函数 里 ,设置 < p > 标签 的 显示 内 容 为 音频 对 象 的 当前 音量 值 。 
3. 是 否 循环 
同样 ,通过 对 按钮 添加 单 击 事件 响应 并 绑 定 的 方式 ,进行 音频 对 象 是 否 循环 播放 的 设 
置 。 具 体 的 代码 逻辑 与 之 前 类 似 , 此 处 不 再 袭 述 。 
var loopSwitch = function()( 
if (audio. loop == false)( 
audio. loop = true; 
loopBtn. value = "Loop On"; 
}else{ 
audio. loop = false; 
loopBtn. value = "Loop Off"; 


) 


不 同 的 是 ,通过 音频 对 象 的 loop 属性 进行 设置 .loop 属性 的 含义 是 当前 音频 对 象 是 否 
进行 循环 播放 ,代码 中 通过 true 和 false 的 布尔 值 进 行 设置 。 在 相应 的 设置 完成 之 后 ,改变 
按钮 内 容 , 以 显示 当前 音频 是 否 为 循环 播放 状态 。 

4. 播放 时 间 显 示 

对 于 播放 时 间 的 显示 ,使 用 的 方式 与 显示 音量 的 方法 类 似 , 具 体 过 程 参考 音量 调节 。 在 
实例 中 音频 播放 时 间 显示 的 表示 方式 为 “已 播放 时 长 /总 时 长 "。 其 中 值得 注意 的 是 ,通过 音 
频 对 象 的 current Time 属性 和 duration 属性 来 分 别 获取 当前 播放 的 时 间 长 度 以 及 总 时 间 长 
度 。 这 两 个 属性 的 具体 值 是 一 个 精度 较 高 的 值 , 在 这 个 实例 中 ,用 不 到 这 样 的 精度 ,所 以 要 
使 用 Math. floor() 方 法 对 获得 的 这 两 个 值 取 整 。 为 了 能 够 实现 对 音频 时 长 的 显示 与 动态 
追踪 ,同时 需要 编写 音频 对 象 的 两 个 事件 响应 ,分 别 是 oncanplay 和 ontimeupdate, 即 音频 
对 象 缓冲 至 可 以 播放 时 和 音频 对 象 播放 时 间 位 置 更 新 时 的 响应 事件 。 

audio. oncanplay = function(){ // 媒 体 缓冲 可 以 播放 时 事件 

time. innerHTML = "播放 时 长 : " + Math. floor (audio. currentTime) + "/" + Math. floor 
(audio. duration); 


volumeValue. innerHTML = "音量 " + volume. toString() + " %"; 





} 
audio. ontimeupdate = function(){ // 媒 体 时 间 更 新 时 事件 

time. innerHTML = "播放 时 长 : " + Math. floor (audio. currentTime) + "/" + Math. floor 
(audio. duration); 


} 
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在 上 面 的 这 个 实例 中 ,我 们 编写 了 一 个 小 播放 器 ,实现 了 对 所 添加 < audio > 对 象 简单 
的 控制 与 调节 。 在 代码 中 ,我 们 用 到 并 介绍 了 一 些 < audio > 对 象 的 属性 和 事件 ,至 于 所 有 
的 < audio > 属性 和 事件 请 读者 在 需要 时 自行 搜索 相关 文档 ,来 编写 更 多 复杂 功能 的 音频 
Tb. 





4.2.1 <video > 标签 


与 HTML5 音频 类 似 ,HTML5 规定 了 一 种 以 video 元 素 包 含 视频 的 标准 方法 ,只 需 在 
HTML 页 面 中 添加 < video > 标签 ,并 指定 好 资源 位 置 就 可 以 在 网 页 中 包含 视频 了 。 因 为 同 
为 媒体 对 象 ,HTML5 音频 与 视频 包含 很 多 相似 的 属性 和 方法 。 下 面 请 看 实例 ,其 在 浏览 器 
中 的 展示 效果 如 图 4. 3 所 示 。 
































图 4.3 视频 添加 


文件 名 : video 标签 . html 


<! DOCTYPE HTML > 


<html lang = "en - US"> 


<head> 
< meta charset = "UTF — 8"> 
<title> 视 频 的 播放 </title> 
</head> 
<body> 


< video src = "waterfa11. mp4" width = "512px" height = "288px" controls = "controls" > 


您 的 浏览 器 不 支持 播放 该 视频 


«/video» 
</body> 
</html> 
在 上 面 的 这 段 代 码 中 ,在 < body > 标签 内 添加 了 一 个 < video > 标签 ,通过 src 属性 指定 
了 视频 资源 ,并 通过 height 和 width 属性 定义 了 视频 元 素 在 页 面 的 大 小 。 同 < audio > 标签 
一 样 ,我 们 添加 了 controls 属性 ,为 页 面 中 的 视频 资源 增加 了 默认 的 播放 控制 控件 ,该 控件 
根据 浏览 器 的 不 同 显示 不 同 的 外 观 , 但 基本 功能 一 致 。 


4.2.2 视频 格式 兼容 


同样 ,在 这 个 实例 中 ,有 些 读者 会 面临 自己 所 添加 的 视频 资源 无 法 在 页 面 中 播放 的 问 
题 。HTML5 视频 在 不 同 的 浏览 器 中 接受 不 同 的 视频 格式 , 若 浏 览 器 不 支持 所 添加 的 视频 
格式 , 则 在 浏览 器 中 运行 的 页 面 上 将 无 法 播放 视频 资源 。 浏 览 器 所 能 够 接受 的 视频 格式 包 
括 OGG、MP4、WebM 等 。 

1. OGG 

Theora 是 开放 而 且 免 费 的 视频 压缩 编码 技术 ,由 Xiph 基金 会 发 布 。 作 为 该 基金 会 
Ogg 项 目的 一 部 分 ,从 VP3 HD 高 清 到 MPEG-4/DiVX 格式 都 能 够 被 Theora 很 好 地 支持 。 
使 用 Theora 无 须 任 何 专利 许可 。Firefox 和 Opera 通过 新 的 HTML5 元 素 提 供 对 Ogg/ 
Theora 视频 的 原生 支持 。 

2. MP4 

MP4 是 一 套用 于 音频 ,视频 信息 的 压缩 编码 标准 ,由 国际 标准 化 组 织 (ISO) 和 国际 电工 
委员 会 (IEC) 下 属 的 “动态 图 像 专 家 组 ”(Moving Picture Experts Group. MPEG) 制定 。 
MPEG-4 格式 的 主要 用 途 在 于 网 上 流 、 光 盘 、 语 音 发 送 ( 视 频 电 话 ) 以 及 电视 广播 。 

3. WebM 

WebM 由 Google 提出 ,是 一 个 开放 、 免 费 的 媒体 文件 格式 。WebM 影片 格式 其 实 是 以 
Matroska( 即 MKV) 容 器 格式 为 基础 开发 的 新 容器 格式 ,其 中 包括 VP8 影片 轨 和 
OggVorbis 音 轨 。WebM 标准 的 网 络 视频 更 加 偏向 于 开源 并 且 是 基于 HTML5 标准 的 ， 
WebM 项 目 旨 在 为 每 个 人 提供 开放 的 网 络 开发 高 质量 、 开 放 的 视频 格式 ,其 重点 是 解决 视 
频 服务 这 一 核心 的 网 络 用 户 体 验 。 

为 了 解决 视频 格式 兼容 问题 ,我 们 需要 了 解 浏览 器 对 于 不 同 视频 格式 的 支持 概况 ,在 
HTMLS 推行 的 过 程 中 ,各 浏览 器 厂商 间 普 遍 支 持 的 是 OGG, MP4 以 及 WebM 这 三 种 格 
式 。 表 4.2 显示 了 各 浏览 器 对 于 上 面 三 种 视频 格式 的 支持 状况 。 


表 4.2 各 浏览 器 对 视频 格式 的 支持 状况 











浏览 器 IE Firefox Opera Chrome Safari 
OGG No 3.5 十 10; 5 十 5. 0 十 No 

MPEG 4 9. 0 十 No No 5.0 十 3.0 十 
WebM No 4.04- 10. 6 十 6.0+ No 

















# 4. 2 提供 了 一 个 大 致 的 视频 支持 参考 ,不 同 种 类 ,不 同 版 本 的 浏览 器 之 间 对 于 视频 格 
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式 的 支持 有 着 较 大 的 差异 。 尽 管 如 此 ,我 们 需要 知道 的 是 越 高 版 本 的 浏览 器 能 够 支持 的 视 
频 格式 越 多 ,但 是 在 实际 应 用 中 ,我 们 需要 考虑 到 使 用 各 不 同 浏览 器 以 及 各 不 同 版 本 的 用 
户 。 同 < audio > 标签 一 样 ,为 了 能 够 更 大 限度 地 实现 跨 浏 览 器 平台 访问 视频 资源 ,常常 需要 
为 同一 视频 资源 准备 不 同 格式 的 多 个 版 本 ,以 使 用 户 能 够 观看 。 


«! DOCTYPE HTML» 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF — 8"> 
< title > 视频 的 播放 </title > 
</head> 
<body> 
< video width = "512px" height = "288px" controls = "controls" > 
< source src = "waterfall.mp4" type = "video/mp4"></source > 
< source src = "waterfa11. ogg" type = "video/ogg"></source > 
< source src = "waterfa11. webm" type = "webm"></source > 
您 的 浏览 器 不 支持 播放 该 视频 
«/video» 
</body> 
</html> 


上 面 这 段 代码 与 最 开始 的 视频 播放 实例 运行 效果 一 样 ,不 同 的 是 ,由 于 指定 了 多 个 资 
源 ,所 以 当 使 用 不 同 浏览 器 运行 这 个 页 面 时 ,即便 是 该 浏览 器 不 支持 首选 视频 格式 ,也 有 很 
大 概率 在 其 他 的 格式 中 选取 能 够 播放 的 视频 资源 。 


4.2.3 <video > 标签 长 宽 设 置 


关于 < video > 视频 元 素 在 页 面 中 大 小 的 设置 ,通常 在 < video > 标签 内 指定 元 素 的 长 宽 
像素 ,或 是 通过 CSS 代码 来 定义 < video > 视频 元 素 的 长 宽 。 值 得 注意 的 是 ,在 同时 指定 一 个 
视频 资源 的 长 和 宽 时 ,应 该 注意 所 设 定 的 长 宽 像素 之 间 的 比例 ,应 当 与 视频 资源 本 身 画 面 的 
长 宽 比 例 保持 一 致 , 若 不 一 致 , 则 在 设置 controls 属性 后 ,浏览 器 的 默认 播放 控件 将 出 现 异 
常 显 示 , 如 下 面 代码 的 长 宽 比 例 ,如 图 4.4 所 示 。 

文件 名 : 异常 的 长 宽 比 例 . html 


<! DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF - 8"> 
<title> 视 频 的 播放 </title> 
</head> 
<body> 
< video height = "600px" width = "512px" controls = "controls" src = "waterfall.mp4"> 
</video> 
</body> 
</htm1> 
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图 4.4 错误 长 宽 比 例 





如 果 将 < video > 视频 元 素 设置 成 如 上 的 长 宽 比 例 , 可 能 会 出 现 类 似 的 播放 控件 与 视频 


不 协调 的 情况 。 所 以 ,通常 比较 安全 的 做 法 是 : 只 设置 长 度 或 宽度 ,浏览 器 会 自动 将 没有 设 
置 的 量 调节 成 相应 比例 并 显示 ,就 不 会 出 现 播放 控件 与 视频 不 协调 的 状况 ,如 图 4.5 所 示 。 


文件 名 : 正确 设置 长 宽 . html 


«! DOCTYPE HTML > 
<html lang = "en 一 US"> 
<head> 
< meta charset = "UTF — 8"> 
<title > 视频 的 播放 </title> 
</head> 
<body> 
<video width= "512px" controls = "controls" src= "waterfall.mp4"></video> 
</body> 
</html > 
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图 4.5 设置 宽 高 的 正确 方法 


4.2.4 <video > 标签 属性 


经 常 访问 视频 网 站 的 读者 可 能 会 注意 到 ,在 视频 未 播放 时 ,网 页 中 的 视频 元 素 显示 的 并 
不 是 空白 ,而 是 有 一 个 封面 。 大 多 数 情况 下 ,这 个 封面 是 这 个 视频 中 的 一 部 分 ,例如 ,之 前 实 
例 中 使 用 的 默认 播放 器 界面 。 也 有 些 时 候 , 这 个 封面 是 指定 的 一 幅 图 片 , 可 能 与 视频 内 容 并 
不 相关 。 在 HTML5 中 ,可 以 在 < video > 标签 中 设置 相关 属性 ,来 显示 一 幅 图 片 作为 视频 未 
播放 时 的 封面 ,如 图 4.6 所 示 。 单 击 播放 控件 中 的 播放 按钮 后 便 会 照常 播放 ,如 图 4.7 
所 示 。 

文件 名 : video 设置 封面 . html 


<!DOCTYPE HTML > 
<html lang = "en — US"> 
<head> 
< meta charset = "UTF — 8"> 
<title> 视 频 的 播放 </title> 
</head> 
<body> 
< video width = "512px" controls = "controls" src= "waterfall.mp4" poster = "doge. jpg"> 
</video> 
</body> 
</html> 


上 面 这 个 实例 在 原 有 < video > 标签 的 基础 上 ,设置 了 poster 属性 ,指定 了 所 要 使 用 的 图 
片 的 URL。 运 行 这 个 页 面 后 ,在 视频 开始 播放 前 ,视频 默认 显示 的 图 片 就 是 所 指定 的 这 张 
图 片 ,而 不 是 浏览 器 默认 播放 器 控件 中 所 显示 的 视频 内 容 图 片 。 在 单 击 播放 后 ,视频 元 素 播 














C Q file///C/Users/SONY/Desktop/HTMLS/E5RRIS Ug xr | $ O O : 








> 0001013 @——ə—— À — t: 


图 4.6 视频 的 poster 属性 未 播放 























图 4.7 视频 的 poster 属性 播放 


放 的 内 容 还 是 其 本 身 的 视频 资源 ,开始 的 图 片 仅 仅 是 作为 封面 。 








对 于 < video > 标签 而 言 ,还 可 以 设置 很 多 属性 ,由 于 音频 和 视频 同属 于 媒体 ,所 以 它们 
的 很 多 属性 和 相关 方法 都 有 着 很 高 的 相似 性 ,在 这 里 就 不 一 一 介绍 了 。 请 读者 自行 搜索 相 
关 文 档 ,并 动手 尝试 , 像 之 前 操作 < audio > 标签 那样 ,自己 试 着 为 页 面 中 的 视频 增加 自动 播 





放 、 循 环 播放 属性 , 试 着 不 使 用 controls 属性 ,制作 一 个 风格 独特 的 播放 器 控件 。 





ER ELE] 


pay 


HTML5 实用 教程 





4.2.5 <yvideo > 标签 方法 及 应 用 


为 了 让 读者 更 好 地 理解 < audio > 和 < video > 标签 ,在 下 面 这 个 实例 中 ,我 们 来 编写 一 个 
简易 的 播放 列表 应 用 。 该 应 用 能 够 从 多 个 视频 资源 列表 中 ,选择 想 要 播放 的 视频 ,选择 视频 
后 ,页 面 的 标题 会 相应 改变 ,并 且 会 自动 播放 所 选中 的 视频 资源 。 该 实例 在 浏览 器 中 的 展示 
效果 如 图 4.8 所 示 。 








ra 
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* Waterfall 
* Malibu Beach 
* Beach 





4.8 视频 列表 


文件 名 : 视频 播放 器 小 应 用 . html 


«! DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF — 8"> 
<title> 视 频 的 播放 列表 </title> 
«style» 
* playList li af 
color:black; 
text — decoration:none; 
) 
# playList li a:hover( 


color:blue; 


) 
</style> 


</head> 
< body> 


«hl id= "videoTitle"»«/hl» 
< video width = "512px" controls = "controls" id= "video"»«/video^ 
<br /><br /> 
<ul id= "playList"» 
<li><a href = "waterfall. mp4"> Waterfall </a></1i> 
<li><a href = "malibu_beach. mp4"> Malibu Beach </a ></1i > 
<li><a href = "beach. mp4"> Beach </a ></li > 


</ul> 

< script» 
var video = document. getElementById("video"); // 获 取 视 频 对 象 
vara = document. getElementsByTagName( "a" ) ; // 获 取 播 放 列 表 中 的 各 <a> 标 签 
var h = document.getElementById("videoTitle"); // 获 取 视 频 标 题 <h> 标 签 对 象 


for (var i2 0;i«a.length;i**)( 
// 为 各 <a> 标 签 添加 单 击 事件 , 单 击 后 改变 当前 播放 视频 
a[i].onclick = function(e)( 
e. preventDefault(); 


video.src - this; 


h. innerHTML = this. innerText; // 将 页 面 标题 变 为 当前 <a> 标 签 内 文字 
video. play(); // 播 放 所 选中 的 资源 
) 
) 
videoPlay(); 


function videoPlay()( 


video.src = "waterfall.mp4"; // 选 择 一 个 资源 为 默认 播放 资源 
h.innerHTML = "Waterfall"; 


) 


</script> 


</body> 

</html> 

上 述 实 例 通过 一 个 < ul > 标签 构造 了 一 个 无 序列 表 , 并 将 视频 资源 的 URL 以 < a > 标签 
的 形式 存放 在 列表 中 的 < 1i> 标 签 中 ,并 在 标签 中 指定 各 视频 资源 的 标题 文字 。 


<ul 


id= "playList"> 

<li><a href = "waterfall. mp4"> Waterfall </a ></1i> 
<li><a href = "malibu beach. mp4"> Malibu Beach</a></li> 
<li><a href = "beach. mp4"> Beach </a » «/li» 


</ul> 


对 村 





F 这 些 < a > 标签 添加 一 些 风格 样式 ,去除 <a > 标签 内 文字 在 页 面 显 示 中 的 默认 下 画 
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线 , 当 鼠标 经 过 这 些 标签 时 ,标签 的 颜色 由 默认 的 黑色 变 为 蓝 色 。 


<head> 
«meta charset = "UTF - 8"> 
<title > 视频 的 播放 列表 </title> 
<style> 
#playList li af 
color:black; 
text — decoration:none; 
) 
# playList li a:hover( 
color:blue; 
) 
</style> 
</head> 


除 此 之 外 ,在 HTML 页 面 中 ,还 添加 了 < hl > 标签 作为 视频 资源 的 标题 ,以 及 < video > 
标签 用 来 展示 视频 资源 。 为 了 美观 ,还 加 入 了 两 个 换行 标签 < br />。 


«hl id = "videoTitle"></hl > 


< video width = "512px" controls = "controls" id = "video"></video> 


<br /><br /> 


基本 的 HTML 页 面 完 成 后 ,我 们 来 编写 驱动 HTML 页 面 来 完成 任务 的 JavaScript 


代码 。 


«script» 
var video = document. getElementById("video"); 
vara = document.getElementsByTagName("a") ; 
var h = document. getElementById("videoTitle"); 


for (var i-0;i«a.length;i**)( 


a[i].onclick = function(e)( 
e. preventDefault(); 
video.src - this; 
h.innerHTML - this. innerText; 
video. play(); 


) 

videoPlay(); 

function videoPlay()( 
video.src = "waterfall.mp4"; 
h.innerHTML - "Waterfall"; 


) 


</script> 


// 获 取 视 频 对 象 
// 获 取 播放 列表 中 的 各 <a > 标签 
// 获 取 视 频 标题 <h > 标签 对 象 


// 为 各 <a> 标 签 添加 单 击 事件 , 单 击 
后 改变 当前 播放 视频 


// 将 页 面 标题 变 为 当前 <a> 标 签 内 文字 
// 播 放 所 选中 的 资源 


// 选 择 一 个 资源 为 默认 播放 资源 


在 这 段 JavaScript 代码 的 前 三 行 , 分 别 获 取 所 需 操 作 的 标签 对 象 。 可 以 注意 到 ,我 们 所 


获取 的 < a > 标签 对 象 和 变量 a 并 不 是 单独 的 某 一 个 < a > 标签 ,而 是 一 个 对 象 数组 ,在 之 后 的 
代码 中 ,需要 像 数 组 一 样 进行 索引 访问 。 在 代码 的 最 下 方 是 我 们 定义 的 视频 播放 函数 ,这 个 
函数 会 直接 运行 而 不 经 过 调用 , 它 为 页 面 中 的 < video > 标签 指定 默认 播放 的 视频 资源 的 
URL, 并 设置 相应 的 标题 文字 。 在 整 段 代码 的 中 间 , 使 用 了 一 个 for 循环 ,为 < a > 标签 对 象 
数组 循环 添加 单 击 事件 函数 ,并 在 函数 调用 时 传人 参数 e 代表 事件 对 象 ,首先 调用 事件 对 象 
的 preventDefault() 方 法 ,阻止 默认 的 单 击 < a > 标签 后 的 播放 效果 。 然 后 ,将 页 面 中 < video > 
标签 的 资源 指定 为 当前 < a > 标签 内 资源 ,同时 将 < h > 标签 内 文本 更 改 为 当前 < a > 标签 内 所 
对 应 的 视频 资源 标题 文本 。 


4.2.6 视频 字幕 


相信 很 多 读者 对 于 字幕 并 不 陌生 。 国 内 有 很 多 字幕 组 利用 自己 的 专业 所 长 为 很 多 视频 
添加 字幕 ,这 让 普通 人 不 用 学 习 语 言 就 可 以 看 懂 来 自 世 界 不 同 地 方 的 视频 。 除 此 之 外 ,视频 
加 上 字幕 后 ,听力 有 障碍 的 人 士 ,也 可 以 理解 视频 中 的 内 容 , 符 合 网 络 标准 化 组 织 一 直 致力 
于 的 无 障碍 访问 的 目标 。 下 面 介绍 如 何 为 视频 元 素 添 加 字幕 。 需 要 注意 的 是 ,本 节 需 要 较 
新 版 本 的 主流 浏览 器 ,并 且 需 要 在 服务 器 环境 运行 。 

从 视频 技术 上 来 说 ,字幕 是 释 加 在 视频 上 显示 的 说 明文 字 。 一 个 字幕 序列 就 是 标记 
时 间 的 文本 轨道 , 它 有 多 种 格式 ,但 这 些 格式 都 有 基本 的 相似 之 处 。 它 们 都 是 带 有 时 间 
标记 的 、 以 时 间 顺 序 排列 的 文本 ,保存 在 文本 文件 中 。 在 我 们 的 实例 中 ,以 WebVTT 
(Web Video Text Tracks) 格 式 为 例 ,为 HTML5 视频 元 素 添加 时 间 标 记 文本 轨道 。 下 面 
是 一 个 WebVTT 文 件 , 里 面包 含 两 行 字幕 。 需 要 注意 的 是 ,这 段 代 码 只 需 在 文本 文件 中 
写 入 ,并 在 保存 时 将 文本 文件 的 后 级 ,由 默认 的 . txt 改 为 . vtt, 并 且 在 文本 的 开头 录入 
WEBVTT. 

文件 名 : english. vtt 


WEBVTT 


1 
00:00:01.000 --> 00:00:03.000 
I love you 


2 

00:00:03.000 --> 00:00:05.000 
I love you 

too 


这 个 WebVTT 文件 格式 如 上 , 先 指 定 一 个 时 间 范 围 , 即 字幕 留存 在 视频 上 的 持续 时 
间 。 接 下 来 的 文本 就 是 具体 的 字幕 内 容 , 以 第 一 段 字幕 为 例 , 它 表示 了 “I love you” X £T 
文字 从 视频 的 第 一 秒 开始 出 现 ,一 直 持续 到 视频 的 第 三 秒 。 第 二 段 字 幕 分 两 行 写 下 了 *I 
love you too”, 在 视频 中 ,这 段 文字 也 将 分 两 行 显示 。 除 此 之 外 ,WebVTT 文件 中 允许 作 
者 定义 更 为 复杂 的 字幕 样式 ,包括 字幕 的 位 置 .加 粗 、 和 斜体 等 ,在 这 里 不 详细 介绍 ,请 有 需要 
的 读者 自行 搜索 学 习 。 接 下 来 ,在 页 面 中 为 < video > 视频 元 素 添 加 上 面 这 段 字幕 ,如 图 4.9 
所 示 。 
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图 4.9 视频 字幕 添加 
文件 名 : video. html 


<! DOCTYPE HTML > 
<html lang = "en- US"> 


<head> 
< meta charset = "UTF - 8"> 
<title> 视 频 的 字幕 </title> 
</head> 
<body> 


< video width = "512px" controls = "controls" src = "waterfall.mp4"> 
«track label = "English" src = "english. vtt" kind = "captions" srclang = "en" default/> 
«/video» 
</body> 
</html> 
在 上 面 的 这 个 实例 中 ,我 们 在 < video > 的 前 后 标签 之 间 添 加 了 < track > 标签 ,定义 所 要 
添加 的 文本 轨道 。 这 里 需要 指定 多 个 属性 ,首先 最 为 重要 的 是 指定 字幕 文本 的 URL, 来 获 
取 视 频 字 幕 资源 。 然 后 是 通过 srclang 来 指定 字幕 所 对 应 的 语言 ,这 个 同样 重要 , 若 不 指定 ， 
可 能 会 出 现 字 符 异常 显示 的 状况 。 在 这 个 实例 中 ,我 们 所 添加 的 字幕 是 英文 的 ,所 以 定义 语 
言 属性 为 HTML 中 英语 的 语言 缩写 en。 之 后 ,还 需 通 过 kind 属性 来 指定 文本 轨道 所 对 应 
的 文本 类 型 ,这 里 选择 的 是 captions 即 字幕 ,当然 也 可 以 根据 需要 ,设置 为 chapters、 
descriptions, metadata subtitles 等 其 他 形式 。 除 此 之 外 ,还 需 指 定 一 个 标签 ,用 来 表示 这 段 
字幕 。 当 需要 为 同一 个 视频 添加 多 个 文本 轨道 时 ,在 区 分 这 些 字幕 时 ,标签 就 显得 尤为 重 
要 。 最 后 为 < track > 标签 添加 default 属性 , 即 默 认 加 上 这 段 文本 轨道 。 
有 时 ,一段 视 频 可 能 对 应 多 个 字幕 ,如 多 种 语言 的 字幕 。 通 过 下 面 这 个 实例 ,我 们 来 学 
习 为 视频 添加 多 个 文本 轨道 。 首 先 ,构造 所 要 添加 的 字幕 文件 。 


WEBVTT 


1 
00:00:01.000 --> 00:00:03.000 
我 是 一 行 字幕 啊 


2 

00:00:03.000 --> 00:00:05.000 
前 面 的 别 跑 

我 也 是 一 行 字幕 


然后 在 < video > 标签 添加 新 的 文本 轨道 ,这 样 就 实现 了 添加 中 文字 幕 ,如 图 4. 10 所 示 。 
Joc EL 
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图 4. 10 ”中 文字 幕 
文件 名 : 添加 中 文字 幕 . html 


«! DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF - 8"> 
<title> 视 频 的 字幕 </title> 
</head> 
<body> 
< video width = "512px" controls = "controls" src = "waterfall. mp4"> 
< track label = "中 文 " src = "chinese. vtt" kind = "captions" srclang = "zh" default/> 
< track label = "English" src "english. vtt" kind- "captions" srclang = "en" /> 
«/video» 
</body> 
</html > 


在 服务 器 环境 运行 页 面 后 ,可 以 看 到 所 添加 的 中 文字 幕 。 单 击 右 下 角 的 CC 控件 ,可 以 

看 到 所 指定 的 标签 信息 ,如 图 4. 11 所 示 ,在 这 里 可 以 通过 标签 的 选择 ,来 选择 视频 采用 哪 一 
个 文本 轨道 。 

在 上 面 的 这 个 实例 中 ,类似 之 前 添加 文本 轨道 的 过 程 ,我 们 添加 了 新 的 文本 轨道 。 设 定 
标签 label 为 “中 文 ”,src 指定 了 文本 轨道 资源 .同时 还 将 srclang 属性 设置 为 中 文 所 对 应 的 
缩写 zh。 这 样 , 便 能 在 视频 中 自如 地 切换 文本 轨道 ,看 到 自己 想 要 的 字幕 了 。 

上 面 这 个 添加 中 文 的 过 程 ,很 多 读者 并 不 能 顺利 地 实现 ,并 出 现 以 下 的 状况 一 一 中 文 显 
示 为 乱码 ,如 图 4. 12 所 示 。 

这 个 问题 出 在 WebVTT 文本 文件 的 保存 格式 上 , 当 保 存 或 男 存 为 文本 文件 时 ,文本 文 
件 默认 的 编码 方式 是 ANSI, 如 图 4. 13 所 示 ,这 种 方式 并 不 支持 中 文 显 示 。 
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图 4.11 多 个 字幕 








图 4.12 乱码 
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4.13 文本 编码 方式 





我 们 需要 在 进行 另存 为 操作 时 ,将 编码 方式 设置 为 UTF-8, 如 图 4.14 所 示 。 
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4.14 应 该 保存 为 UTF-8 
这 样 , 含 有 中 文 编写 的 WebVTT 文件 才能 被 正确 地 显示 。 


4.3 3] 题 


1. 自制 一 个 音频 播放 器 或 视频 播放 器 (不 使 用 controls 属性 ) ,实现 如 下 功能 : 

。 自 定义 的 播放 暂停 控件 样式 。 

。 时 间 进度 条 的 显示 。 

: 音量 的 动态 滑动 控制 。 

2. 在 第 1 题 的 基础 上 ,建立 一 个 播放 列表 ,将 可 播放 的 资源 以 列表 的 形式 列 出 ,要 求 能 
够 动态 地 追踪 当前 正在 播放 的 音频 或 视频 ,并 区 别 显示 。 


(在 第 7 章 ,我 们 将 学 习 HTMLS 中 绘制 图 形 的 相关 方法 ,结合 这 些 知识 我 们 可 以 制作 
更 为 美观 实用 的 视频 或 音频 播放 页 面 ) 


LEE 


FAPA 





第 5 = 地 理 定 位 


在 如 今 的 互联 网 时 代 ,无 论 对 于 互联 网 企业 还 是 互联 网 的 使 用 者 ,地 理 位 置 都 是 一 个 十 
分 重要 的 信息 。 团 购 网 站 可 以 根据 用 户 的 地 理 位 置信 息 为 用 户 提供 最 近 的 娱乐 地 点 ,天 气 
预报 网 站 也 可 以 根据 用 户 的 地 理 位 置信 息 提供 其 所 在 城市 未 来 两 周 的 天 气 状况 等 , 许 许 多 
多 的 网 站 都 在 使 用 着 用 户 地 理 位 置信 息 , 尽 管 地 理 定 位 信息 可 以 说 是 用 户 十 分 重要 的 个 人 
隐私 ,也 有 很 多 用 户 不 愿意 暴露 自己 的 地 理 位置 相 关 信 息 。 但 在 另 一 方面 ,用 户 的 地 理 位 置 
信息 确实 让 互联 网 相关 企业 能 够 更 有 针对 性 地 为 用 户 提 供 服务 。 不 过 还 是 要 提醒 读者 ,在 
使 用 不 安全 的 网 站 ,或 是 有 较 大 公开 性 的 社交 平台 时 ,在 决定 是 否 提供 地 理 位 置信 息 前 ,请 
三 思 而 后 行 。 

不 同 浏览 器 对 于 地 理 定位 (Geolocation) API 的 提供 有 所 差异 ,尤其 是 使 用 PC 浏览 器 
的 读者 ,在 试 着 编写 并 运行 本 章 代 码 的 过 程 中 ,有 很 大 可 能 无 法 得 出 相应 的 结果 。 在 此 建 
议 ,本章 地 理 定位 API 的 代码 ,请 部 署 在 服务 器 端 , 如 有 条 件 尽 量 使 用 具有 GPS 定位 系统 
的 移动 设备 (如 智能 手机 、 智 能 平板 ) 来 访问 服务 器 相关 页 面 ,这 样 有 更 大 的 可 能 性 成 功 运 
行 。 对 于 使 用 PC 进行 访问 ,可 能 会 出 现 地 理 位 置 获取 失败 的 情况 ,建议 更 换 不 同 浏览 器 进 
行 尝试 。 





5.1 浏览 器 如 何 获取 地 理 信 息 


可 以 通过 HTMLS 地 理 定位 功能 从 浏览 器 获取 地 理 位 置信 息 , 那 么 浏览 器 又 是 如 何 知 
道 地 理 位 置信 息 的 呢 ? 

浏览 器 大 致 会 通过 以 下 几 种 方式 来 确定 地 理 位 置信 息 ,并 根据 实际 情况 调整 获取 方 
式 , 通 常 在 使 用 浏览 器 定位 服务 时 无 法 知道 浏览 器 到 底 是 使 用 哪 种 方式 获取 的 地 理 位 置 
信息 。 

1. GPS 

全 球 定位 系统 (Global Positioning System,GPS) 是 由 美国 国防 部 研制 建立 的 一 种 具有 
全 方位 .全天候 、 全 时 段 ,高 精度 的 卫星 导航 系统 ,能 为 全 球 用 户 提 供 低 成 本 、 高 精度 的 三 维 
位 置 .速度 和 精确 定时 等 导航 信息 。 目 前 GPS 被 广泛 用 于 导航 防盗 等 设备 中 ,为 大 量 企业 
或 个 人 提供 定位 服务 。 

对 于 HTML» 的 学 习 者 来 说 .需要 知道 的 是 ,目前 市 面 上 大 量 的 智能 手机 、 智 能 平板 、 
导航 设备 等 都 配备 有 GPS 系统 .能够 获取 到 较 高 精度 的 地 理 定位 信息 。 而 GPS 定位 系统 
在 笔记 本 电脑 上 的 配置 情况 远 不 如 移动 设备 。 





2. IP 地 址 

IP 地 址 是 互联 网 协议 地 址 (Internet Protocol Address) 的 简写 。 它 为 互联 网 的 每 一 个 
网 络 和 每 一 台 主 机 分 配 一 个 逻辑 地 址 ,大 部 分 普通 民用 网 络 IP 地 址 由 互联 网 服务 提供 商 
(Internet Service Provider,ISP) 统 一 提供 和 管理 。 

HTML5 地 理 定位 相关 的 API 有 时 会 通过 IP 地 址 来 判断 用 户 的 地 理 位 置信 息 ,很 多 从 
PC 所 获取 的 地 理 定位 信息 ,很 大 可 能 是 通过 IP 地 址 来 确定 当地 互联 网 提供 商 服 务 器 的 位 
置 来 确定 的 。 尽 管 这 样 的 定位 方式 不 够 精确 ,但 是 这 种 方式 还 是 确定 了 用 户 所 在 城镇 等 信 
息 ,可 以 为 天 气 预报 网 站 、 网 络 购物 平台 所 使 用 。 

3. 手机 信号 基站 

尽管 市 面 上 大 量 的 手机 都 配备 了 GPS 服务 ,但 是 GPS 服务 耗 时 较 长 ,有 时 不 够 稳定 精 
确 。 手 机 信号 基站 也 是 一 个 获取 地 理 定位 信息 的 选择 。 采 用 这 种 方法 ,可 以 通过 计算 手机 
与 相 邻 各 基站 间 的 方位 信息 ,来 确定 当前 设备 的 地 理 坐 标 信息 。 

4. Wi-Fi 

Wi-Fi 定位 通过 周围 一 个 或 多 个 的 Wi-Fi 热点 信息 ,再 通过 一 些 距离 计算 可 以 获取 到 
地 理 位 置信 息 。 这 种 方法 在 室内 使 用 且 周 玮 有 多 个 Wi-Fi 热点 时 精度 相对 较 高 且 速 度 较 
快 , 它 也 是 浏览 器 获取 地 理 定位 信息 的 方式 之 一 。 


5.2 获取 访客 经 纬度 信息 


经 度 与 纬度 共同 组 成 了 地 理 坐 标 系统 ,这 样 就 可 以 唯一 确定 地 球 上 的 一 点 。 通 过 地 理 
定位 相关 API, 可 以 获取 访客 的 地 理 坐标 信息 。 请 看 如 下 实例 ,其 在 浏览 器 中 的 展示 效果 如 
图 5. 1 所 示 。 
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纬度 : 40. 082523341851 
经 度 : 116. 31534139296 
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图 5.1 经 纬度 信息 


她 理 定 位 


How 


HTML5 实用 教程 





文件 名 : 获取 访客 经 纬度 信息 . html 


<! DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
«meta charset = "UTF — 8"> 
« title» Geolocation </title> 
</head> 
<body> 
< div id= "myLocation"> 
</div> 
< button id = "getLoc" onclick = "getMYLocation()"> 获 取 坐 标 </button > 
< script> 
function getMyLocation()( 
if (navigator.geolocation)( 
navigator. geolocation. getCurrentPosition(displayLocation); 
}else{ 
alert(" 您 的 浏览 器 不 支持 地 理 定位 "); 
} 
} 
function displayLocation(position){ 
var latitude = position. coords. latitude; 
var longitude = position. coords. longitude; 


var div = document. getElementById("myLocation"); 
div. innerHTML = "纬度 : " + latitude +"<br>" + "经 度 : " + longitude; 
"om 

</body> 

</html> 

上 面 这 段 代码 首先 在 HTML 页 面 中 添加 了 一 个 按钮 并 为 其 指定 单 击 事件 以 及 事件 处 
理 函数 getMyLocation()。 当 运行 这 个 页 面 并 单 击 按钮 后 ,就 会 执行 get MyLocation O PR 
数 。 这 个 函数 首先 进行 了 一 次 判断 ,判断 当前 浏览 器 环境 下 是 否 能 够 提供 地 理 定位 服务 ,如 
果 没 有 则 提醒 用 户 。 这 个 判断 语句 的 条 件 就 是 navigator 对 象 是 否 存在 geolocation 的 相关 
属性 或 方法 。 其 中 navigator 对 象 包含 浏览 器 相关 信息 及 其 所 运行 环境 信息 ,除了 地 理 位 置 
信息 外 ,还 包括 浏览 器 名 称 、 版 本 、 浏 览 器 所 运行 环境 的 操作 系统 以 及 操作 系统 语言 等 信息 。 
相信 很 多 读者 在 下 载 一 些 软 件 时 ,会 发 现 单 击 下 载 直 接 获取 的 资源 就 是 当前 使 用 的 操作 系 
统 版 本 ; 有 时 我 们 在 国外 上 网 ,浏览 一 些 本 应 是 英文 的 网 站 时 ,发 现 网 站 的 语言 竟然 是 中 文 
简体 。 这 类 服务 很 大 程度 上 是 依赖 于 navigator 对 象 的 相关 信息 来 实现 的 。 

在 确定 了 当前 浏览 器 支持 地 理 定 位 服务 后 ,就 可 以 通过 navigator 对 象 下 的 geolocation 
的 getCurrentPosition() 方 法 来 获取 当前 坐标 。 这 个 方法 所 需 传 人 的 是 一 个 函数 。 通 常 获 
取 地 理 定位 的 方法 会 耗费 一 段 时 间 , 尽 管 只 是 几 百 毫秒 .但 相 比 于 页 面 其 他 代码 执行 的 时 间 
而 言 可 以 说 是 十 分 漫长 的 了 ,所 以 getCurrentPosition() 方 法 应 当 是 异步 的 , 即 执行 获取 地 
理 位 置信 息 的 相关 程序 不 应 影响 主页 面 的 运行 .所 以 需要 提供 一 个 函数 , 当 获 取 地 理 位 置信 
息 成 功 后 来 运行 这 个 函数 ,通过 该 函数 将 所 获取 的 信息 反馈 给 用 户 。 在 这 里 传 信 的 就 是 


displayLocation O PR , 

在 displayLocation O 函数 中 ,传人 的 参数 即 是 getCurrentPostion() 方 法 所 返回 的 位 置 
信息 position 对 象 。 通 过 这 个 对 象 来 读 取 相 应 的 信息 。 在 displayLocation() 函数 中 ,我 们 
访问 position 对 象 的 coords( 地 理 坐 标 ) 属 性 下 的 latitudeCZfi EE) fI longitude( 经 度 ) ,这 样 也 
就 获取 了 访客 的 经 纬度 信息 。 如 果 需 要 ,也 可 以 通过 position 对 象 的 timestamp 属性 来 获 
取 地 理 定位 服务 的 相应 时 间 戳 , 即 返 回 地 理 定位 信息 后 的 时 间 ,应 注意 这 个 时 间 戳 信息 的 格 
式 并 不 是 常见 可 读 的 年 月、 日 小时、 分钟 、 秒 ,而 是 相对 格林 威 治标 准时 间 1970 年 1 月 1 
H 00 : 00 : 00.000( 格 里 高 利 历 ,公历 ) 的 以 毫秒 为 单位 的 偏 移 量 , 即 常见 于 计算 机 和 电子 
设备 的 时 间 , 它 需要 进行 一 定 的 换算 才 可 阅读 并 应 用 。 

当然 对 于 position 对 象 的 coords 属性 ,其 包括 的 不 只 是 经 纬度 信息 ,也 包括 海拔 
altitude, Jy [5] heading, 3E EE speed 等 。 不 过 其 他 信息 的 获取 依赖 于 浏览 器 种 类 版 本 以 及 浏 
览 器 获取 地 理 信息 的 方式 。 对 于 配备 有 GPS 服务 的 智能 手机 或 是 智能 平板 来 说 ,获取 海 
拔 、 方 向 速度 等 信息 的 可 能 性 更 大 。 

对 于 许多 互联 网 企业 来 说 ,获取 访客 的 地 理 位 置信 息 之 后 ,就 可 以 大 致 判断 出 访客 的 所 
在 国家 、 所 在 城市 以 及 与 访客 相关 的 距离 等 信息 ,这 为 下 一 步 提供 差异 化 ,具体 化 的 服务 带 
来 了 可 能 。 当 然 作 为 用 户 ,个 人 地 理 位 置信 息 属于 个 人 隐私 ,对 于 很 多 人 来 说 处 于 “被 监视 ” 
的 状态 会 有 一 些 不 适 。 所 以 在 通过 浏览 器 试图 获取 地 理 位 置信 息 坐 标 前 ,浏览 器 会 主动 询 
问 用 户 是 否 共享 个 人 的 坐标 位 置 。 用 户 可 以 选择 同意 或 拒绝 ,也 可 以 通过 浏览 器 调整 与 个 
人 隐私 相关 的 设置 ,对 于 某 些 或 是 所 有 的 网 站 始终 提供 或 不 提供 获取 地 理 位 置信 息 的 权限 ， 
这 些 选 择 的 权利 始终 在 用 户 一 边 。 


5.3 错误 处 理 


相信 不 少 读者 在 测试 上 述 代 码 时 或 多 或 少 遇 到 了 一 些 困 难 。 地 理 定 位 相关 的 API 最 
好 的 测试 方法 是 将 代码 部 署 在 服务 器 上 ,然后 通过 配备 有 GPS 的 手机 或 平板 访问 , 才 更 有 
可 能 获取 更 为 准确 的 地 理 位 置信 息 。 通 过 PC 的 浏览 器 访问 服务 器 的 相关 代码 , 仍 有 较 大 
可 能 无 法 完成 获取 。 这 其 中 的 原因 一 方面 是 各 个 浏览 器 种 类 和 版 本 对 于 同一 获取 地 理 位 置 
信息 的 具体 实现 有 些 区 别 , 在 实际 应 用 上 ,效果 可 能 有 些 差异 ; 另 一 方面 ,地 理 定位 的 获取 
即便 对 于 那些 带 有 GPS 服务 的 设备 来 说 ,也 有 很 多 不 稳定 性 ,有 时 费时 较 长 有 时 不 够 精 
确 。 当 然 , 如 果 访 客 拒绝 提供 自己 的 相关 地 理 位 置信 息 ,获取 地 理 信息 的 过 程 也 不 能 顺利 完 
成 。 所 以 对 于 这 些 常见 的 问题 ,错误 处 理 是 必 不 可 少 的 ,在 出 现 可 能 的 问题 导致 获取 过 程 失 
败 时 ,需要 将 错误 及 时 告知 用 户 和 相关 服务 程序 。 下 面 通 过 具体 实例 来 学 习 地 理 定位 的 错 
误 处 理 方法 ,其 在 浏览 器 中 的 展示 效果 如 图 5. 2 和 图 5.3 所 示 。 

文件 名 : 错误 处 理 方法 . html 

<!DOCTYPE HTML > 

<html lang = "en — US"» 

<head> 


< meta charset = "UTF - 8"> 
<title> Geolocation </title> 





HTMLS Z Jl] # 





é> C [o localhost:8088/Geolocation/Geolocation 错 误 处 理 ht @ 图 女 | 4 o 








当前 地 理 定位 不 可 用 
Network location provider at 'https://www.googleapis.com/' : No response received. 
[gruss | 





图 5.2 错误 处 理 一 不 可 用 错误 





€ > C [O localhost8088/Geolocation/Geolocation 错 误 处 理 ht @ Bj r 
地 理 定 位 请 求 被 用 户 拒绝 
ETT 

















5.3 错误 处 理 一 用 户 拒绝 


</head> 


< body> 
< div id= "myLocation"> 
</div> 
< button id = "getLoc" onclick = "getMYLocation()"> 获 取 坐 标 </button > 
< Script> 


function getMyLocation()( 
if (navigator. geolocation) { 
navigator. geolocation. getCurrentPosition(displayLocation, displayError); 
Jeise( 
alert(" 您 的 浏览 器 不 支持 地 理 定位 ") 
) 
) 
function displayLocation(position)( 
var latitude = position. coords. latitude; 
var longitude = position. coords. longitude; 


var div = document. getElenentById("nyLocation"); 
div. innerHTML = "纬度 : ”+ latitude +"<br>" + "经 度 : " + longitude; 
) 
function displayError(error)( 
var errorTypes = ( 
0:" 未 知 错误 "， 
1:" 地 理 定位 请 求 被 用 户 拒绝 "， 
2:" 当 前 地 理 定位 不 可 用 "， 
3:" 请 求 超时 " 
}; 
var errorMessage = errorTypes[error.code]; 
// 在 以 下 两 种 情况 下 ,错误 信息 还 包括 一 些 具体 内 容 
if (error.code == 0 || error.code == 2){ 
errorMessage = errorMessage + "<br>" + error.message; 
} 
var div = document. getElementById("myLocation"); 
div.innerHTML = errorMessage; 
) 
</script> 
</body> 
</html> 


上 述 实例 在 运行 过 程 中 产生 了 两 个 错误 ,分 别 是 地 理 位 置 不 可 用 以 及 用 户 拒 绝 提供 地 
理 位 置信 息 。 还 是 之 前 的 navigator XF: F geolocation 的 getCurrentPosition() 方 法 ,不 同 
的 是 这 次 传人 了 两 个 函数 ,来 处 理 这 个 方法 的 返回 对 象 。getCurrentPosition() 方 法 有 两 个 
可 选 的 完成 函数 : 第 一 个 默认 是 成 功 之 后 的 完成 函数 , 另 一 个 可 选 的 就 是 出 现 错误 时 的 完 
成 函数 。 在 实例 中 ,指定 完成 函数 为 displayError() 并 编写 函数 的 代码 。 

function displayError(error){ 

var errorTypes = ( 


0:" 未 知 错误 "， 
1:" 地 理 定位 请 求 被 用 户 拒绝 "， 
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2:" 当 前 地 理 定位 不 可 用 "， 
3:" 请 求 超时 " 
}; 
var errorMessage = errorTypes[ error. code]; 
// 在 以 下 两 种 情况 下 ,错误 信息 还 包括 一 些 具体 内 容 
if (error.code == 0 || error.code -- 2){ 
errorMessage - errorMessage * "«br»" * error.message; 
) 
var div = document. getElementById("myLocation"); 
div.innerHTML - errorMessage; 


) 


在 这 个 displayError() 函 数 中 ,传人 的 参数 即 是 getCurrentPosition() 方 法 在 执行 出 错 
时 所 返回 的 error 对 象 。error 对 象 包含 属性 code,error. code 的 标准 即 是 errorTypes 内 所 
指定 的 几 种 错误 ,在 这 里 将 错误 信息 中 文 写 入 errorTypes 数组 。 如 果 不 写 这 一 步 也 可 以 直 
接 通 过 error. message 来 直接 获取 相应 的 错误 信息 。 应 注意 , 当 错 误 代 码 为 0 或 2 时 ， 
error. message 会 包含 一 些 具 体 可 能 的 错误 ,在 这 里 需要 在 所 构造 的 错误 信息 字符 串 的 基础 
上 连接 error. message 来 构成 一 个 完备 的 错误 信息 。 


5.4 地 理 定位 选项 


除了 上 述 的 两 个 成 功 获 取 定 位 与 错误 处 理 的 完成 函数 外 ,getCurrentPosition() 方 法 还 
可 以 传人 其 他 的 地 理 定位 选项 ,分 别 是 enableHighAccuracy, timeout 以 及 maximumAge。 
可 以 在 上 述 实例 中 添加 类 似 如 下 的 代码 片段 来 具体 使 用 。 


options = ( 

enableHighAccuracy: true, 

maximumAge: 60000, 

timeout: 30000 

}; 

navigator. geolocation. getCurrentPosition(displayLocation, displayError, options); 

这 段 代 码 向 getCurrentPosition ( ) 方 法 中 传人 了 自行 定义 的 options 对 象 。 它 由 
enableHighAccuracy , timeout 以 及 maximumAge 三 个 属性 值 组 成 。 

enableHighAccuracy 属性 可 选 true 或 false, 表 示 是 否 要 求 高 精度 的 地 理 定位 检测 。 这 
个 设 定 的 具体 执行 效果 依赖 于 发 起 请 求 的 设备 是 否 具 有 GPS 定位 系统 服务 ,否则 意义 不 
大 。 这 个 属性 的 默认 值 是 false, 即 不 执行 高 精度 定位 。 在 没有 具体 应 用 场景 的 情况 下 ,也 
尽量 避免 将 其 设 定 为 true 来 支持 高 精度 定位 。 高 精度 的 定位 首先 费时 ; 其 次 对 于 移动 设备 
来 说 ,还 会 消耗 一 些 额 外 的 电量 。 

maximumAge 属性 设 定 了 缓存 地 理 定位 信息 的 时 间 长 度 ,以 毫秒 为 单位 。 在 上 面 的 代 
码 中 ,maximumAge: 60000 代表 了 一 次 地 理 定位 数据 从 获取 到 失效 的 持续 时 间 为 
60 000ms, 即 60s。 这 样 就 避免 了 在 实际 应 用 中 反复 调用 费时 费 电 的 地 理 定位 服务 ,但 在 另 
一 方面 , 当 进 行 类 似 导航 这 样 的 追踪 服务 时 ,maximumAge 的 属性 值 设 定 越 高 ,追踪 的 效果 


就 越 差 ,可 能 就 不 能 满足 实际 应 用 场景 的 需要 。 默 认 情 况 下 ,maximumAsge 的 属性 值 为 0， 
即 不 进行 坐标 的 缓存 ,每 一 次 的 调用 意味 着 重新 向 浏览 器 请 求 地 理 信息 服务 ,而 不 是 直接 使 
用 不 久 前 刚刚 获取 的 数据 。 

timeout 属性 设 定 了 等 待 地 理 定位 信息 服务 的 时 间 上 限 ,以 毫秒 为 单位 。 在 上 面 的 代 
码 中 ,timeout: 30000 即 代表 了 从 用 户 同意 共享 地 理 位 置信 息 开始 计时 ,经 过 300 00ms, 即 
30s 后 , 若 还 未 获取 地 理 位 置信 息 就 会 提前 结束 这 一 过 程 ,返回 一 个 error 对 象 , 且 对 应 的 
error. code 为 3, 即 请 求 超时 。 默 认 情况 下 一 般 是 没有 请 求 时 间 上 限 的 ,具体 情况 可 能 因 浏 
览 器 种 类 和 版 本 而 异 。 


5.5 地 理 定位 追踪 


之 前 我 们 使 用 的 是 navigator F geolocation 对 象 的 getCurrentLocation() 方 法 。 这 个 
方法 在 每 一 次 调用 之 后 都 会 返回 发 出 请 求 的 用 户 的 地 理 位 置信 息 。 这 种 方法 大 部 分 时 候 被 
应 用 于 获取 用 户 某 一 时 刻 的 固定 地 理 位 置信 息 。 而 在 很 多 的 应 用 场景 中 ,需要 持续 地 对 用 
户 的 位 置 进行 跟踪 ,比如 导航 的 过 程 。 这 时 若 想 完 成 对 目标 的 追踪 ,就 不 仅仅 需要 一 次 地 理 
位 置信 息 获取 ,而 是 需要 不 断 地 获取 地 理 定位 信息 。geolocation 对 象 的 watchPosition() 就 
可 以 注册 监听 器 ,并 在 设备 的 地 理 位 置 发 生变 化 后 被 调用 ,这 个 方法 具体 传人 的 参数 和 
getCurrentLocation() 一 样 ,需要 传人 一 个 获取 定位 成 功 的 回调 函数 ,可 选 参数 分 别 是 之 前 
所 提 到 的 错误 处 理 函数 以 及 其 他 三 个 地 理 定位 选项 。 大 致使 用 方法 如 下 。 








options = ( 
enableHighAccuracy: true, 
maximumAge: 60000, 
timeout: 30000 
); 
if (navigator.geolocation)( 
id = navigator. geolocation. watchPosition(displayLocation, displayError, options); 
)else( 
alert(" 您 的 浏览 器 不 支持 地 理 定位 "); 
} 


可 以 看 出 ,watchPosition() 方 法 与 getCurrentLocation 方法 的 使 用 几乎 相同 。 所 不 同 
的 首先 是 二 者 的 调用 次 数 , watchPosition () 在 设备 地 理 位 置 发 生 改 变 时 会 被 调用 , 而 
getCurrentLocation() 方 法 则 是 一 次 性 的 。 然 后 的 一 大 区 别 是 , watchPosition() 方 法 注册 了 
一 个 监听 器 ,用 来 监听 地 理 定位 是 否 变 化 。 当 然 这 个 监听 器 会 占用 一 些 额外 的 运算 资源 ,所 
以 在 一 次 监测 行为 结束 后 ,要 关闭 监听 器 ,并 释放 相应 资源 。 在 上 述 代码 中 我 们 发 现 ,在 调 
用 watchPosition( ) 方 法 时 返回 了 一 个 id 指 代 当前 的 监听 行为 。 所 以 当 我 们 要 取消 这 次 地 
理 定 位 追踪 时 ,只 需 调 用 clearWatch() 方 法 并 传人 这 个 id 值 , 即 可 完成 取消 。 


navigator. geolocation. clearWatch(id); 
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5.6 J 题 


1. 分 别 站 在 服务 提供 者 和 用 户 的 角度 思考 地 理 位 置信 息 所 带 来 的 好 处 与 隐患 。 

2. 解释 地 理 坐 标 系 的 定义 与 应 用 。 

3. 浏览 器 可 能 通过 怎样 的 方式 来 获取 用 户 的 地 理 位 置信 息 ? 

4. 任意 选择 地 球 上 的 一 个 城市 ,通过 网 络 查询 到 这 座 城市 的 坐标 ,构建 Web 小 应 用 来 
计算 这 个 城市 与 当前 位 置 的 距离 。 

5. 自行 搜索 地 图 厂商 所 提供 的 地 图 组 件 , 在 浏览 器 中 展示 基于 地 图 的 当前 位 置 ,并 构 
建 简单 的 应 用 。 
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在 普通 的 应 用 软件 里 ,鼠标 对 于 某 一 物体 的 拖 放 是 非常 常见 的 , 且 应 用 十 分 广泛 。 但 是 
以 前 作为 文本 传播 的 网 页 却 不 具有 此 种 功能 ,HTML5 的 出 现 增加 了 很 多 的 新 特性 ,使 我 们 
所 浏览 的 网 页 能 够 具有 软件 应 用 应 有 的 特性 ,这 些 新 特性 中 就 包括 HTML 页 面 内 元 素 的 
拖 放 (Drag and Drop,DnD)API。 它 提供 了 对 HTML 元 素 进行 拖 放 处 理 的 相关 鼠标 事件 ， 
使 开发 者 能 够 像 开 发 应 用 一 样 ,为 页 面 中 的 元 素 增加 拖 放 功能 。 

首先 ,了 解 一 下 每 一 次 鼠标 拖 动 一 个 元 素 会 经 历 哪 些 过 程 。 先 是 鼠标 选中 所 要 拖 动 的 
元 素 , 按 下 鼠标 左 键 ,开始 拖 动 。 然 后 ,持续 按 下 鼠标 左 键 ,并 开始 滑动 进行 拖 动 的 过 程 。 当 
松 开 鼠标 左 键 后 ,一 次 拖 动 行为 结束 。 

只 拖 动 一 个 元 素 是 不 够 的 ,我 们 还 需要 一 个 区 域 去 接收 这 个 被 拖 动 的 元 素 , 当 被 拖 动 的 
元 素 进 入 这 个 区 域 时 ,可 以 提示 用 户 这 个 区 域 可 以 放 入 元 素 。 当 被 拖 动 的 元 素 走出 这 个 区 
域 时 ,也 可 以 提示 用 户 你 已 离开 这 个 区 域 。 当 被 拖 动 的 元 素 被 放 人 能 够 接受 的 区 域 后 ,需要 
做 出 相应 的 处 理 。 

接 下 来 通过 上 面 的 这 两 个 主要 过 程 一 一 拖 动 和 放下 一 一 来 讲解 HTML5 的 拖 放 API。 


6.1 拖 动 (Drag) 


平常 浏览 网 页 的 经 历 告诉 我 们 ,并 不 是 所 有 的 页 面 元 素 都 是 可 以 被 拖 动 的 。 根 据 浏 
览 器 的 不 同 , 有 些 元 素 可 以 被 拖 动 , 例 如 , 拖 动 页 面 中 的 图 片 之 后 浏览 器 会 加 载 新 的 页 面 
单独 显示 图 片 ,而 有 些 元 素 ( 比 如 一 个 段落 ) 却 很 少 能 被 拖 动 。 这 是 因为 每 个 HTML 页 
面 内 的 元 素 都 有 一 个 属性 draggable, 它 定义 了 元 素 是 否 能 够 被 拖 动 ,一 般 来 讲 , 有 些 元 素 
是 默认 可 以 被 拖 动 的 ,如 图 片 的 draggable 属性 是 true。 而 对 于 一 些 段落 而 言 , 如 果 没 有 
设置 该 属性 ,一 般 都 是 不 能 被 拖 动 的 。 下 面 先 从 draggable 属性 人 人手, 初步 了 解 元 素 的 拖 
放 。 该 实例 在 浏览 器 中 的 展示 效果 如 图 6. 1 所 示 。 

文件 名 : 默认 draggable 属性 . html 


<!DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF — 8"> 
< title? draggable 属性 </title> 
</head> 
< body> 
<p> 你 试 试 能 不 能 整个 拖 动 这 段 文字 ,再 试 试 下 面 的 图 片 呢 </p> 
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< img src = "doge. jpg"/> 
</body> 
</html> 


口 draggable 导 性 x 








c | @ fileVWCYUserwSONY/Desktop/HTMLS5/ 拖 放 / 拖 放 初步 了 解 .html 








你 试 试 能 不 能 整个 拖 动 这 段 文字 ， 再 试 试 下 面 的 图 片 呢 











6.1 默认 draggable 属性 


当 没 有 设置 draggable 属性 时 ,大 部 分 浏览 器 可 以 支持 图 片 的 可 拖 动 ,而 对 于 整个 段落 
却 不 行 。 下 面 手动 设置 draggable 属性 。 更 改 属性 后 的 效果 如 图 6.2 Bros. 


D draggable 
c [o file:///C:/Users/SONY/Desktop/HTML5/ 拖 放 / 拖 放 初 步 了 解 .html 


现在 试 一 试 能 不 能 拖 动 整个 段落 ， 下 面 的 图 片 呢 





现在 试 一 试 能 下 能 拖 动 整个 段 著 ， 下 面 的 图 片 呢 
6.2 更 改 draggable 属性 


文件 名 : 更 改 draggable 属性 . html 


<! DOCTYPE HTML > 
<html lang = "en- US"> 
< head» 
< meta charset = "UTF - 8"> 
< title» draggable 属性 </title> 
</head> 
< body> 
< p draggable = "true"> 现 在 试 一 试 能 不 能 拖 动 整个 段落 , 下面 的 图 片 呢 ……</p> 
< ing src = "doge. jpg" draggable = "false"/> 
</body> 
</html> 


分 别 设置 draggable 属性 之 后 ,可 以 看 到 ,原本 能 够 被 拖 动 的 图 片 似 乎 “长 "在 了 页 面 
上 ,而 之 前 不 能 被 拖 动 的 整个 段落 , 却 能 够 被 我 们 * 拿 "起 来 。 

只 是 能 够 拖 动 元 素 是 远 远 不 够 的 ,还 需要 对 拖 忠 过 程 进 行 控 制 ,形成 一 个 完整 的 过 程 ， 
才能 称 得 上 是 一 次 拖 放 过 程 。 下 面 结合 第 4 章 的 一 部 分 知识 ,逐步 构造 一 个 包含 拖 放 过 程 
的 “小 应 用 ”, 来 分 析 HTML5 的 拖 放 API。 首 先 看 下 面 的 实例 ,其 在 浏览 器 中 的 展示 效果 
如 图 6. 3 Bra. 





D) SAPI x 
C | Q file///C/Users/SONY/Desktop/HTMLS/f&itt/fsift.html 


看 我 纯洁 的 小 眼神 




















图 6.3 拖 放 小 应 用 1 
文件 名 : 拖 放 小 应 用 1. html 


<! DOCTYPE HTML > 

<html lang = "en- US"> 

<head> 
< meta charset = "UTF — 8"> 
<title > 拖 放 API </title> 
«style» 

# leftBox( 
float:left; 
width:200px; 
height:200px; 
margin:5px; 
border:3px solid # 000080; 

) 

# rightBox( 
float:left; 
width:200px; 
height:200px; 
margin:5px; 
border:3px solid # 00868B; 

) 

</style> 
</head> 


How 
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<body> 
<hl id= "dogSpeak"> 看 我 纯洁 的 小 眼神 </hl > 
< div id= "leftBox"> 
</div> 
< div id= "rightBox"> 
< img id = "doge" src = "doge. jpg" alt = "Doge" draggable = "true" /> 
</div> 
« audio id= "audio" src = "bark.mp3"></audio > 
< script> 
var leftBox = document.getElementById("leftBox"); 
var img = document. getElementById("doge"); 
var wordOfTheDog = document.getElementById("dogSpeak"); 
var audio = document. getElementById("audio"); 
// 音 频 初始 化 
function audioInit()( 
audio. autoplay = true; 
audio. volume = 0; 
audio. loop = true; 
) 
audiolnit(); 
// 事 件 处 理 函 数 
function startDrag(e)( 


wordOfTheDog.innerHTML = "我 被 拖 动 了 





) 

function drag(e)( 
audio.volume - 1.0; 

) 

function endDrag(e)( 
wordOfTheDog. innerHTML 
audio.volume - 0; 


"你 把 我 放下 了 t; 


) 
// 为 图 片 添加 相应 的 事件 监听 
img. addEventListener("dragstart", startDrag); 
ing. addEventListener( "drag", drag); 
img. addEventListener("dragend" , endDrag) ; 
</script> 
</body> 
</html> 


在 这 个 实例 中 ,首先 在 HTML 页 面 中 设置 了 两 个 < div > 元 素 , 作 为 进行 拖 放 活 动 的 两 
个 区 域 , 并 在 其 中 一 个 区 域 中 添加 一 个 图 片 ; 在 开头 ,添加 了 一 个 < h > 标签 ,作为 状态 的 
Won. 

« hl id = "dogSpeak"> 看 我 纯洁 的 小 眼神 </hl > 

«div id= "leftBox"> 


</div> 
< div id= "rightBox"> 


< img id= "doge" src = "doge. jpg" alt = "Doge" draggable = "true" /> 
«/div» 


然后 ,通过 CSS 设置 两 个 拖 放 区 域 的 风格 样式 ,使 两 个 < div > 元 素 更 像 是 两 个 盒子 。 


< style> 
# leftBox( 
float:left; 
width:200px; 
height:200px; 
margin:5px; 
border:3px solid # 000080; 
} 
#rightBox{ 
float:left; 
width:200px; 
height:200px; 
margin:5px; 
border:3px solid # 00868B; 
) 
</style> 
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« audio id = "audio" src = "bark. mp3"></audio > 


由 于 大 多 数 浏览 器 支持 图 片 draggable 默认 属性 为 true, 所 以 不 设置 该 属性 。 最 后 来 
看 一 下 支持 拖 电 相 关 事 件 的 JavaScript 代码 。 


«script» 
var leftBox = document. getElementById("leftBox"); 
var img = document. getElementById("doge"); 
var wordOfTheDog = document. getElementById("dogSpeak"); 
var audio = document. getElementById("audio"); 
// 音 频 初始 化 
function audioInit()( 
audio.autoplay 7 true; 
audio.volume - 0; 
audio.loop - true; 
) 
audioInit(); 
// 事 件 处 理 函 数 
function startDrag(e)( 
wordOfTheDog.innerHTML = "我 被 拖 动 了 ……"; 
} 
function drag(e){ 
audio.volume = 1.0; 
) 
function endDrag(e)(í 
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wordOfTheDog.innerHTML = "你 把 我 放下 了 …… "s 
audio.volume - 0; 

) 

// 为 图 片 添加 相应 的 事件 监听 

img. addEventListener("dragstart", startDrag); 

img. addEventListener("drag",drag); 

img. addEventListener("dragend" , endDrag) ; 

</script> 


在 这 段 JavaScript 代码 中 ,前 四 行 先 获取 所 要 进行 操作 的 相关 元 素 , 包 括 图 片 对 象 、. 音 
频 对 象 、. 显示 的 状态 信息 < h > 标签 以 及 位 于 页 面 左 侧 的 < div >。 然 后 是 我 们 编写 的 
audioInit() ,初始 化 音频 的 播放 并 在 下 一 行 代码 执行 。 在 初始 化 音频 时 ,我 们 设置 了 音频 自 
动 并 循环 播放 , 且 音 量 为 0, 即 虽然 播放 着 音频 但 不 能 被 听 到 。 

之 后 就 是 支持 HTMLS 的 拖 放 API 的 核心 部 分 , 即 鼠 标的 相关 事件 。 在 这 个 实例 中 ， 
我 们 来 初步 认识 其 中 的 一 部 分 。 没 有 进行 “ 放 ” 的 动作 ,仅仅 是 拖 动 一 下 。 在 代码 中 ,我 们 为 
图 片 对 象 添加 了 三 个 事件 监听 ,分 别 是 dragstart、drag 和 dragend, dragstart 表示 拖 忠 开始 
的 事件 , 即 当 鼠标 移动 至 目标 元 素 , 并 按 下 左 键 的 一 刹那 所 触发 的 事件 。drag 表示 拖 忠 进 
行 中 的 事件 , 即 鼠 标 左 键 持续 按 下 并 选中 目标 元 素 的 过 程 ,其 与 dragstart 的 不 同 在 于 ,drag 
是 对 于 过 程 的 监听 ,而 dragstart 是 对 于 开始 发 生 的 监听 。drag 实际 上 是 一 个 每 隔 几 百 毫秒 
触发 一 次 的 事件 ,而 dragstart 是 开始 拖 忠 时 所 触发 的 一 次 性 事件 。 而 对 于 dragend, 它 表示 
拖 蝶 行为 结束 时 所 触发 的 事件 , 即 放 开 鼠 标 左 键 ,停止 拖 虹 过 程 时 所 触发 的 事件 。 

对 于 这 三 个 事件 监听 ,对 应 的 有 我 们 所 编写 的 处 理 函 数 。startDrag(e) 函数 定义 了 在 
A "E i LESE ch > 标签 中 内 容 的 变换 ,以 表示 图 片 已 被 拖 动 。 其 中 ,传人 的 参数 e 为 event, 
即 事件 对 象 , 它 包 含 某 一 事件 的 基本 信息 。drag(e) 函 数 定义 了 在 拖 忠 过 程 中 设置 音频 的 音 
量 为 默认 值 ,使 之 前 静音 的 音频 能 够 被 听见 。endDrag(e) 函数 定义 了 拖 电 动作 结束 后 < h > 
标签 内 容 的 变换 ,表示 拖 忠 过程 结 束 。 

运行 这 个 实例 ,可 以 用 鼠标 去 拖 忠 位 于 页 面 右 侧 区 域 的 图 片 , 当 拖 动 狗 狗 图 片 时 ,会 听 
到 预先 静音 播放 的 音效 , 且 能 通过 < h > 标签 看 到 狗 狗 “ 说 "的 话 。 停 止 拖 动 后 ,也 能 够 相应 
地 看 到 < h > 标签 带 来 的 反馈 。 





6.2 放下 (Drop) 


只 可 以 拖 动 是 不 够 的 ,还 需要 定义 放下 (Drop) 相 关 的 动作 ,才能 完整 地 编写 一 个 拖 放 
应 用 的 逻辑 。 下 面 在 之 前 那个 应 用 的 基础 上 ,增加 一 些 内 容 , 使 我 们 的 拖 放 小 应 用 变 得 完 
整 。 除 了 在 之 前 应 用 中 可 以 拖 动 狗 狗 并 发 出 声音 之 外 ,这 里 还 可 以 将 狗 狗 拖 动 到 左 侧 的 盒 
子 中 (使 原先 另 一 个 盒子 中 的 狗 狗 消失 ) ,并 且 在 拖 动 狗 狗 进入 和 离开 预定 区 域 时 改变 盒子 
样式 进行 提示 。 该 实例 在 浏览 器 中 的 展示 效果 如 图 6.4 所 示 。 

文件 : 拖 放 小 应 用 2. html 

<!DOCTYPE HTML > 


« htnl lang= "en- US"> 
<head> 














6.4 拖 放 小 应 用 2 


< meta charset = "UTF - 8"> 
<title> 拖 放 API </title> 
<style> 
# leftBox( 
float:left; 
width:200px; 
height :200px; 
margin:5px; 
border:3px solid # 000080; 


) 

# rightBox( 
float:left; 
width:200px; 
height:200px; 
margin:5px; 
border:3px solid it 00868B; 

) 

</style> 
</head> 


< body> 
«hl id= "dogSpeak"> 看 我 纯洁 的 小 眼神 </hi > 
<div id= "leftBox"> 
</div> 
<div id= "rightBox"> 
< ing id= "doge" src = "doge. jpg" alt = "Doge" draggable = "true"/> 
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</div> 
<audio id = "audio" src = "bark.mp3"></audio > 


< script> 

var leftBox = document.getFlementById("leftBox"); 

var img = document. getElementById("doge"); 

var wordOfTheDog = document.getElementById("dogSpeak"); 

var audio = document. getElementById("audio"); 

//— +B HER o 8 G a EL bs Je t CC 

var dropped - false; 

// 音 频 初始 化 

function audioInit()( 
audio.autoplay 7 true; 
audio.volume - 0; 
audio.loop - true; 

) 

audioInit(); 

// 事 件 处 理 函 数 

function startDrag(e){ 
wordOfTheDog.innerHTML = "我 被 拖 动 了 
var code = '< img id= "doge" src = "doge. jpg" alt = "Doge" />'; 
e. dataTransfer. setData( 'Text', code) ; 





) 
function drag(e)( 
audio.volume - 1.0; 
) 
function endDrag(e)( 
e. preventDefault(); 
wordOfTheDog.innerHTML = "你 把 我 放下 了 …… my 
if (dropped) ( 
var pic = e.target; 
pic.style.visibility = "hidden"; 
) 
leftBox.style.background - "White"; 
leftBox.style.border = "3px solid # 000080"; 
audio.volume - 0; 
) 
function overDrag(e)( 
e. preventDefault(); 
) 
function drop(e){ 
e. preventDefault(); 
leftBox. innerHTML = e.dataTransfer.getData( Text'); 
dropped - true; 
) 
function enterDrag(e)( 
e. preventDefault(); 
wordOfTheDog.innerHTML = "我 飞 到 了 左边 "; 


leftBox.style.background = " # 9AFF9A"; 
leftBox.style.border = "3px solid #9370DB"; 
) 
function leaveDrag(e)( 
e. preventDefault(); 
wordOfTheDog.innerHTML = "R Kii TEH"; 
leftBox. style. background = "White"; 
leftBox. style. border = "3px solid # 000080"; 
} 
// 为 图 片 添加 相应 的 事件 监听 
img. addEventListener("dragstart", startDrag); 
img. addEventListener("drag",drag); 
img. addEventListener("dragend" , endDrag) ; 
// 为 左 侧 的 盒子 添加 事件 监听 
leftBox. addEventListener("dragover", overDrag); 
leftBox. addEventListener("drop", drop); 
leftBox. addEventListener("dragenter", enterDrag); 
leftBox. addEventListener("dragleave", leaveDrag); 
«/script» 
</body> 
</html> 


与 之 前 代码 所 不 同 的 是 ,这 次 为 左 侧 的 < div > 元 素 添 加 了 拖 电 相关 的 事件 监听 ,并 修改 
了 一 些 之 前 的 事件 处 理 函 数 ,使 我 们 能 够 将 狗 狗 放 先 在 左 侧 的 盒子 里 。 通 过 观察 
JavaScript 代码 段 可 以 发 现 , 相 比 之 前 代码 ,我 们 为 左 侧 盒子 添加 了 四 个 不 同 的 事件 监听 ， 
分 别 是 dragover drop ,dragenter 和 dragleave, 同 时 也 修改 了 之 前 图 片 的 事件 处 理 函 数 。 我 
们 先 关注 dragover 事件 的 监听 以 及 相应 的 处 理 函 数 。 

function overDrag(e){ 

e. preventDefault(); 

) 

我 们 为 左 侧 < div > 元 素 添 加 了 dragover 事件 监听 ,事件 处 理 函数 为 overDrag(e)。 尽 
管 这 个 函数 里 只 有 一 行 代码 ,但 这 行 代码 却 是 至 关 重 要 的 。dragover 事件 在 每 次 被 拖 动 元 
素 经 过 时 触发 ,该 事件 的 默认 处 理 方法 是 不 允许 被 拖 动物 体 放置 于 本 元 素 内 。 所 以 ,为 了 将 
被 拖 忠 元 素 放 入 左 侧 的 盒子 ,需要 通过 “e. preventDefault(); ”来 阻止 默认 的 处 理 方 法 ,使 
左 侧 的 < div > 元 素 可 以 作为 可 放置 区 域 。 

下 面具 体 分 析 将 狗 狗 放 和 人 盒子 的 过 程 。 需 要 完成 的 工作 是 拖 动 位 于 右 侧 盒子 中 的 狗 
狗 ,将 狗 狗 拖 动 到 左 侧 并 松 开 鼠 标 后 , 狗 狗 出 现在 左 侧 盒子 中 ,而 原本 右 侧 盒子 内 的 狗 狗 消 
失 了 。 当 没有 把 狗 狗 拖 动 到 左 侧 盒子 时 , 狗 狗 还 留 在 原先 的 位 置 。 为 了 完成 这 一 过 程 ,需要 
借助 dataTransfer 对 象 来 保存 被 拖 动 对 象 的 数据 ,并 在 被 拖 动 对 象 被 放下 之 后 ,将 数据 传递 
到 可 接受 区 域 ,从 而 实现 页 面 中 一 个 元 素 从 一 个 位 置 到 另 一 个 位 置 的 改变 。 


var dropped = false; 


先 用 一 个 临时 的 变量 来 指示 当前 的 元 素 是 否 被 放 管 下 来 ,用 来 判断 被 拖 忠 元 素 是 否 抵 
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function startDrag(e)( 
wordOfTheDog.innerHTML = "我 被 拖 动 了 …… “y 
var code = '< img id= "doge" src = "doge. jpg" alt = "Doge" />'; 
e. dataTransfer. setData( 'Text', code); 

] 


在 图 片 原来 的 dragstart 事件 的 处 理 函 数 基础 上 ,将 被 拖 电 元 素 的 代码 保存 到 code 变 
量 中 ,并 通过 dataTransfer 对 象 的 setData 方法 ,将 code 中 的 内 容 保存 下 来 ,以 便 传 递 。 
function drop(e)( 
e. preventDefault(); 
leftBox. innerHTML = e.dataTransfer.getData( Text'); 
dropped = true; 
) 


然后 ,应 注意 为 左 侧 盒子 所 添加 的 drop 事件 处 理 函 数 ,drop 5 fF fe 88 ü 76 # (fE `⁄ 
前 被 添加 事件 监听 的 元 素 上 ) 释 放 时 触发 ,将 leftBox 的 innerHTML 属性 改 为 之 前 保存 的 
被 拖 忠 元 素 代码 ,同时 将 是 否 被 放下 状态 变量 dropped MH true, 这 样 就 完成 了 HTML 页 
面 中 一 个 图 片 元 素 从 一 个 < div > 元 素 中 获取 保存 再 复制 到 另 一 个 < div > 元 素 中 的 过 程 。 之 
后 ,需要 使 之 前 盒子 内 的 图 片 元 素 消失 。 
function endDrag(e){ 
e. preventDefault(); 
wordOfTheDog.innerHTML = "你 把 我 放下 了 …… 
if (dropped){ 
var pic = e.target; 
pic.style.visibility = "hidden"; 
) 
leftBox.style.background = "White"; 
leftBox. style. border = "3px solid # 000080"; 


audio.volume - 0; 


) 


在 之 前 为 图 片 添加 的 dragend 事件 监听 的 处 理 函 数 中 ,判断 元 素 是 否 被 放下 。 如 果 被 
放 到 了 指定 区 域 ,那么 将 当前 拖 中 的 元 素 ( 即 原本 位 于 右 侧 < div > 元 素 内 的 < img > 元 素 ) 设 
置 为 不 可 见 , 由 此 ,将 狗 狗 从 右 侧 盒子 放 和 到 左 侧 盒子 后 , 狗 狗 出 现在 左 侧 盒子 中 , 右 侧 盒子 
内 的 狗 狗 消失 。 

另外 ,在 执行 拖 放 操作 时 ,需要 给 用 户 一 些 提示 ,通过 明显 的 页 面 变化 来 告诉 用 户 当 前 
被 拖 忠 元 素 可 以 在 此 处 放下 ,或 者 告诉 用 户 已 经 离开 了 可 放置 元 素 的 区 域 。 这 时 需要 为 可 
放置 区 域 元 素 添 加 dragenter 和 dragleave 事件 监听 ,并 编写 相应 的 事件 处 理 函 数 给 用 户 明 
显 的 提示 。dragenter 事件 在 被 拖 息 元 素 进 入 当前 元 素 时 触发 , dragleave 事件 在 被 拖 电 元 
素 恰好 离开 当前 元 素 时 触发 。 

function enterDrag(e){ 

e. preventDefault(); 


wordOfTheDog.innerHTML = "我 飞 到 了 左边 "; 
leftBox. style. background = "#9AFF9A"; 
leftBox. style. border = "3px solid #9370DB"; 
l 
function leaveDrag(e)( 
e. preventDefault(); 
wordOfTheDog. innerHTML = "我 飞 出 了 左边 "; 
leftBox.style.background = "White"; 
leftBox.style.border = "3px solid # 000080"; 
$ 


在 上 面 这 段 代 码 中 , 左 侧 盒 子 的 dragenter 事件 处 理 函 数 使 左 侧 < div > 元 素 的 背景 和 边 


框 的 颜色 发 生 改 变 , 用 来 提示 用 户 , 当 前 被 拖 忠 元 素 已 经 进入 可 释放 区 域 。 而 dragleave 事 
件 处 理 函 数 则 将 左 侧 < div > 元 素 的 背景 和 边框 设置 回 之 前 的 样式 ,告诉 用 户 已 离开 可 释放 
区 域 。 应 注意 ,在 之 前 的 dragend 事件 处 理 函 数 中 ,我们 也 编写 了 < div > 元 素 的 样式 设置 ， 
将 其 变 回 到 之 前 的 样式 ,提示 读者 当前 的 拖 放 操作 已 完成 。 


以 上 通过 一 个 简单 的 小 应 用 介绍 了 HTML 的 拖 放 API 的 基本 使 用 方式 ,但 上 面 的 代 


码 仅 作 为 演示 ,其 中 有 很 多 不 够 完善 的 地 方 ,比如 上 面 拖 动 图片 的 过 程 并 不 是 把 一 个 图 片 添 
加 到 了 另 一 个 < div > 标签 内 ,而 是 先 复 制 了 一 份 再 插入 ,并 把 之 前 的 那 一 份 隐藏 掉 , 这 样 的 
拖 放 操作 是 一 次 性 的 ,不 够 灵活 ,不 能 来 回 地 进行 拖 放 操作 。 下 面 再 通过 一 个 实例 具体 地 了 
fit data Transfer 对 象 的 使 用 。 该 实例 实现 了 一 个 元 素 在 两 个 区 域 的 来 回 拖 放 。 其 在 浏览 器 
中 的 展示 效果 如 图 6. 5 所 示 。 
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文件 名 : 元 素 的 来 回 拖 放 . html 


<! DOCTYPE HTML > 
<html lang = "en — US"> 
<head> 
< meta charset = "UTF — 8"> 
<title> 拖 放 API </title> 
< style> 
# leftBox( 
float:left; 
width:200px; 
height:200px; 
margin:5px; 
border:3px solid # 000080; 
) 
# rightBox( 
float:left; 
width:200px; 
height:200px; 
margin:5px; 
border:3px solid # 00868B; 
) 
</style> 
</head> 
< body> 
< div id= "leftBox"> 
</div> 
<div id= "rightBox"> 
<p id= "pl" class = "test" draggable = "true"> 这 是 一 段 话 </p> 
« p id= "p2" class = "test" draggable = "true"> 这 又 是 一 段 话 </p> 
« p id= "p3" class = "test" draggable = "true"> 这 又 又 是 另 一 段 话 </p> 
</div> 
< Script> 
var leftBox = docunment.getElementById("leftBox"); 
var rightBox = document. getElementById("rightBox"); 





function startDrag(e)( 
e. dataTransfer. setData( 'Text', this. id); 
) 
function overDrag(e)( 
e. preventDefault(); 
) 
function drop(e)( 
e. preventDefault(); 
var id = e.dataTransfer.getData("Text"); 
var elem = document. getElementByld(id); 
elem. parentNode. removeChild(elem); 
this. appendChild(elem); 


/ ABUS P S p ERE, 3Ë OS EL ETUS Dn d 82 3E PF UT 
var p = document.getElementsByClassName("test"); 
for (vari = 0; i« p.length; i++){ 

p[ i]. addEventListener("dragstart", startDrag); 


) 
// 对 左右 两 侧 的 盒子 添加 事件 监听 
leftBox. addEventListener("dragover", overDrag); 
rightBox. addEventListener("dragover", overDrag); 
leftBox. addEventListener("drop",drop); 
rightBox. addEventListener("drop", drop); 
«/script» 
</body> 
</html> 


这 个 实例 沿用 了 上 个 小 应 用 里 的 两 个 < div > 元 素 与 样式 ,不 同 的 是 ,这 次 添加 了 三 个 
<p > 元 素 , 各 自 添加 了 id, 并 设置 了 相同 的 class. 
<div id = "rightBox"> 
<p id= "pl" class = "test" draggable = "true"> 这 是 一 段 话 </p> 
<p id= "p2" class = "test" draggable = "true"> 这 又 是 一 段 话 </p> 
<p id= "p3" class = "test" draggable = "true"> 这 又 又 是 另 一 段 话 </p> 
</div> 
然后 ,在 JavaScript 代码 段 中 ,为 这 些 页 面 中 的 元 素 添加 事件 监听 以 及 事件 处 理 函 数 。 
与 之 前 不 同 的 是 ,我 们 为 两 个 < div > 元 素 均 添加 了 事件 监听 ,并 复 用 了 事件 监听 的 处 理 函 
数 。 注 意 如 下 代码 段 。 





function startDrag(e){ 
e. dataTransfer. setData( 'Text', this. id); 
) 
function overDrag( e) ( 
e. preventDefault(); 
1 
function drop(e)( 
e. preventDefault(); 
var id = e.dataTransfer.getData("Text"); 
var elem = document. getElementById(id); 
elem. parentNode. removeChild(elem); 
this. appendChild(elem); 
) 


在 这 里 来 看 一 下 开始 拖 动 事件 dragstart 的 处 理 函 数 ,与 之 前 直接 复制 代码 段 不 同 ,这 
一 次 获取 的 是 当前 被 拖 电 元 素 的 id, HH “e. data Transfer. setData CText'. this. id); ”实现 。 
而 在 drop 事件 的 处 理 函 数 中 ,我 们 通过 data Transfer 对 象 所 保存 的 id 信息 ,获取 到 当前 被 
拖 虹 元 素 , 并 通过 “elem. parentNode. removeChildCelem) ; ”将 先前 父 节 点 下 的 该 子 节点 删 
除 , 然 后 以 当前 被 释放 区 域 作为 新 的 父 节点 ,添加 被 拖 忠 元素。 运行 上 面 这 段 代 码 , 就 可 以 
自由 地 在 两 个 区 域 拖 放 页 面 中 两 个 盒子 内 的 段落 元 素 。 
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接 下 来 详细 介绍 dataTransfer 对 象 。dataTransfer 对 象 主要 有 两 个 方法 : 一 个 是 
setData() 方 法 ; 另 一 个 是 getData() 方 法 。 其 中 setData() 方 法 用 来 保存 所 要 传递 的 数据 ， 
getData() 方 法 可 以 取得 之 前 setData() 方 法 所 保存 的 数据 。 在 上 面 的 代码 段 中 可 以 看 到 ， 
setData() 方 法 传人 了 两 个 参数 : 第 一 个 参数 是 用 来 描述 数据 类 型 的 字符 串 ; 第 二 个 参数 则 
是 传人 的 数据 本 身 。 然 后 ,getData( ) 方 法 就 可 以 获得 之 前 该 类 型 下 所 保存 的 数据 。 对 于 
HTML: 拖 放 来 说 ,dataTransfer 对 象 在 拖 放 开 始 和 结束 之 间 创 建 和 销毁 ,通过 setData() 
和 getData() 方 法 就 可 以 让 数据 在 拖 放 之 间 传 递 。 这 样 在 页 面 中 就 可 以 对 元 素 进行 相对 自 
由 的 操作 。 


6.3 习 m 


l. 曾 述 完整 的 拖 放 过 程 需要 哪些 事件 驱动 ,它们 的 作用 分 别 是 什么 。 
2. 改写 本 章 第 一 个 拖 放 实 例 ,使 狗 狗 可 以 在 页 面 内 的 两 个 盒子 之 间 自 由 拖 放 。 
3. 如 图 6. 6 所 示 , 实 现 一 个 拖 忠 选择 填空 的 功能 ,选项 可 以 拖 忠 到 指定 区 域 ,并 且 保 留 
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图 6.6 单 选 填空 


4. 在 第 3 题 的 基础 上 ,实现 多 选 拖 忠 , 如 图 6.7 所 示 ,选项 可 以 在 备 选 答案 与 输入 答案 
之 间 自 由 移动 。 有 兴趣 的 读者 可 以 继续 编写 ,如 记录 所 答 选 项 以 便 判 断 正 误 、 记 录 选 项 顺 
序 等 。 
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6.7 iki 


5. 编写 一 个 可 以 通过 拖 忠 点 餐 的 页 面 ,实现 用 户 可 以 通过 鼠标 拖 忠 所 选 餐 点 ,实时 记 
录 并 生成 餐 点 清单 。 
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Canvas 中 文 译 为 画布 ,顾名思义 ,开发 人 员 可 以 通过 它 在 网 页 上 完成 绘图 相关 的 工作 。 
HTMLS 的 canvas 元 素 使 用 JavaScript 在 网 页 上 实时 生成 图 像 ,并 操作 图 像 内 容 。 它 使 用 
基于 矢量 的 编程 方法 来 创建 图 形 .渐变 以 及 其 他 图 形 特效 。 有 经 验 的 Web 开发 人 员 可 以 用 
它 来 增强 网 站 的 视觉 效果 甚至 开发 出 一 个 功能 全 面 的 应 用 。 目 前 ,市 面 上 绝 大 部 分 较 新 的 
PC 端 和 移动 端 浏 览 器 都 支持 Canvas API。 


7.1 Canvas 标签 使 用 


文件 名 : canvas 标签 使 用 . html 


<! DOCTYPE HTML > 
<html lang = "en - US"> 
<head> 
< meta charset = "UTF - 8"> 
<title></title> 
</head> 
<body> 
< canvas id= "myCanvas" width = "500" height = "300" style = "border:2px solid black;"> 
</canvas > 
<script> 
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 
</script> 
</body> 
</html> 


我 们 在 < body > 标签 范围 内 插入 < canvas > 标签 。 一 般 < canvas > 标签 包含 三 个 属性 ,分 
别 是 id、width 和 height。 其 中 id 是 这 个 canvas 元 素 唯 一 指定 的 名 字 。 通 过 明确 地 命名 ， 
JavaScript 脚本 便 可 以 使 用 id 找到 所 要 操作 的 “画布 "。width 和 height 这 两 个 属性 分 别 指 
定 这 个 “画布 ”的 宽度 和 高 度 ,单位 是 像素 。 一 般 建议 在 < canvas > 标签 内 指定 这 两 个 属性 ， 
如 不 设 定 , 其 默认 的 宽度 是 300px, 高 度 是 150px。 虽 然 开 发 者 可 以 通过 CSS 指定 “画布 "大 
小 ,但 是 这 个 宽 高 的 改变 影响 的 只 是 < canvas > 标签 在 HTML 布局 的 大 小 ,如 果 CSS 设 定 
的 尺寸 与 < canvas > 标签 内 设 定 的 宽 高 属性 不 符 , 则 可 能 会 出 现 使 所 绘图 形变 形 失真 的 
问题 。 


默认 情况 下 ,< canvas > 在 页 面 上 显示 为 一 块 空白 且 无 边框 的 矩形 。 为 了 能 够 看 到 这 块 
画布 ,需要 给 这 块 “ 画 布 ? 添 加 边框 。 在 < canvas > 内 继续 添加 属性 ”style 一" border: 
2px solid black;"”, 如 图 7.1 所 示 。 
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7.1 canvas 标签 的 使 用 


为 了 能 够 进一步 地 在 这 块 “画布 "上 进行 绘图 相关 的 操作 ,必须 先 用 JavaScript 获取 对 
象 ,并 取得 二 维 绘图 上 下 文 。 为 了 绘制 二 维 图 像 , 使 用 “2d” 来 获取 上 下 文 。 
<script> 
var canvas = document. getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 
</script> 
代码 首先 通过 调用 document. getElementById() 的 方法 获取 < canvas > 元 素 , 然 后 通过 
调用 其 getContext() 方 法 ,获取 当前 canvas 对 象 的 二 维 绘图 上 下 文 。 通 过 这 个 二 维 绘图 上 
下 文 , 便 可 以 完成 许多 绘图 相关 的 任务 ,如 直线 曲线 的 绘制 ,文字 的 泻 染 等 。 


7.2 Canvas 坐标 系统 


在 正式 开始 Canvas API 之 前 ,首先 需要 知道 关于 Canvas 坐标 的 基本 知识 ,其 坐标 系统 
如 图 7.2 所 示 。 
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在 Canvas API 的 使 用 过 程 中 ,经 常 要 输入 坐标 参数 ， 
以 确定 屏幕 上 的 某 一 位 置 。 与 我 们 在 数学 中 经 常 定义 的 坐 
标 系 有 所 不 同 ,Canvas 中 的 坐标 系 的 原点 位 于 画布 的 左上 
角 , 其 X 轴 方 向 水 平 指向 屏幕 的 右 侧 ,其 Y 轴 方 向 垂直 指向 
屏幕 的 下 方 。 如 图 7. 2 所 示 ,我 们 要 确定 A(z,y) 这 一 点 ， 
在 屏幕 二 维 空间 内 其 对 应 位 置 就 是 ,水 平方 向 相对 于 屏幕 
最 左 侧 距 离 > 且 垂 直方 向 相对 于 屏幕 最 上 侧 距 离 y 的 这 个 
FoU x M y 的 单位 是 像素 。 7.2 canvas 坐标 系统 


7.3 ”线路 径 与 形状 


在 图 形 的 构成 中 , 线 是 从 一 点 到 另 一 点 所 组 成 的 路 径 (path) ,这 个 线 可 以 是 直线 也 可 以 
是 曲线 。 多 条 线 首尾 相 接 就 组 成 了 一 个 闭合 图 形 ,这 个 闭合 图 形 一 般 称 为 形状 (shape) , 常 
见 的 形状 有 三 角形 、 和 矩形 、 梯 形 、 萎 形 等 。 除 此 之 外 ,当然 还 有 各 种 各 样 不 规则 的 形状 。 在 二 
维 的 “画布 "上 ,我 们 所 要 夯 出 的 就 是 这 些 线条 、 这 些 形状 。 


7.3.1 绘制 线段 
先 从 简单 的 绘制 一 个 线段 (line) 开 始 ,绘制 效果 如 图 7. 3 所 示 。 




















7.3 绘制 线段 


文件 名 : 绘制 线段. html 


<!DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 


</head> 
<body> 
< canvas id= "myCanvas" width = "500" height = "300"»«/canvas > 
< script > 
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 


context. moveTo(50, 50) ; // 规 定 起 点 坐标 (50, 50) 
context. lineTo(250, 250); // 规 定 终点 坐标 (250, 250) 
context. stroke() ; // 绘 制 
</script > 
</body> 
«/htnl» 


从 代码 中 可 以 看 出 ,这 个 画 线段 的 过 程 就 如 同 在 纸 上 用 笔 作 画 。 在 现实 中 ,我 们 需要 拿 
起 笔 移动 到 线段 开始 的 位 置 ,然后 心中 想到 移动 的 目标 位 置 ,最 后 画 过 去 。 代 码 中 的 过 程 也 
是 这 样 , 先 调用 context 对 象 下 的 moveTo(x,y) 方 法 将 * 笔 ?移动 到 开始 坐标 ,然后 调用 
lineTo(x,y) 确 定 “ 笔 ”将 要 运动 到 的 目的 坐标 ,最 后 调用 stroke ) 方 法 进行 绘制 。 

当然 , 画 一 条 线段 肯定 不 止 一 种 画 法 ,在 实际 下 笔画 Cstroke) 之 前 ,可 以 更 换 不 同 粗细 、 
不 同 颜色 的 笔 来 绘制 。 若 在 “画布 "上 实现 这 一 功能 , 则 只 需 在 stroke() 方 法 前 ,调用 
context 对 象 下 的 改变 线段 样式 的 相关 方法 。 

文件 名 : 线段 添加 样式 . html 


«! DOCTYPE HTML > 
< html lang = "en - US"> 
<head> 
< meta charset = "UTF - 8"> 
«title»«/title» 
</head> 
< body> 
< canvas id = "myCanvas" width = "500" height = "300"></canvas > 
<script> 
var canvas = document. getElementById("myCanvas" ); 
var context = canvas.getContext("2d"); 


context. moveTo(50, 50); 
context. lineTo(250, 250) ; 


// 添 加 改变 样式 的 方法 
context. lineWidth = 10; // 线 段 的 宽度 ,单位 像素 
context.strokeStyle = "i 1874CD"; // 选 择 颜 色 , 一 种 蓝 色 


context. stroke(); 
</script> 
</body> 
</html> 


在 “下 笔 ” 之 前 添加 样式 之 后 ,就 有 了 图 7.4 所 示 的 效果 。 其 中 ,lineWidth 用 来 改变 线 
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7.4 线段 添加 样式 


条 的 粗细 ,单位 默认 为 像素 。strokeStyle 用 来 改变 线条 的 颜色 ,颜色 可 以 用 十 六 进 制 颜色 
代码 表示 (如 #1874CD) ,或 者 用 RGB 颜色 代码 值 表示 (如 rgb(24,116,205))。 

除了 上 述 改变 ,应 用 中 也 经 常 遇 到 需要 改变 “笔头 ”形状 ,笔头 ”可 变形 状 如 图 7. 5 
所 示 。 

使 用 lineCap 可 以 设置 线段 两 端的 形状 , 即 — 
线头 类 型 。 默 认 值 是 中 间 的 butt, 即 方 头 ， 除 ——— p winar", 
此 之 外 ,还 可 以 设置 为 round( 圆 头 ) 或 square = context.lineCap-" butt"; 
(加 长 方 头 ), 从 图 7.5 可 以 看 到 ,在 设置 成 这 两 — context.lineCap="square"; 
种 形式 后 ,线段 的 两 端 会 在 默认 的 基础 上 延长 l: 

一 小 段 ,延长 的 距离 就 是 线 宽 长 度 的 1/2。 7.5 线段 两 端 形状 


7.3.2 绘制 路 径 


在 绘制 线段 时 ,有 时 不 会 只 画 一 种 线段 ,一 个 图 形 中 可 能 出 现 多 种 形式 的 线段 。 那 么 ， 
通过 什么 来 区 分 各 自 独 立 的 许多 线段 呢 ? 答案 就 是 路 径 (path) 。 

先 尝试 如 下 代码 ,请 读者 自行 运行 ,看 是 否 能 画 出 两 条 粗细 不 同 的 线段 。 

文件 名 : 绘制 粗细 不 同 的 线段 . html 


<! DOCTYPE HTML > 
<html lang = "en- US"> 
<head > 
< neta charset = "UTF — 8"> 
«title»«/title» 
</head> 
< body> 
«canvas id = "myCanvas" width = "500" height = "300"></canvas > 
< script> 














var canvas = document.getElementById("myCanvas"); 
var context = canvas. getContext("2d"); 


context.moveTo(50,50); 
context. lineTo(250,250); 
context.lineWidth = 5; 
context. stroke(); 


context.moveTo(100,50); 
context. lineTo(300,250); 
context.lineWidth - 20; 
context. stroke(); 
«/script» 
</body> 
</html> 


// 将 线段 粗细 设置 为 5px 


// 将 线段 粗细 设置 为 20px 


运行 这 段 代码 之 后 ,展示 效果 如 图 7. 6 Bros ,读者 应 该 并 没有 观察 到 一 条 细 线 段 和 一 条 
粗 线段 ,而 是 两 条 粗 线段 。 之 所 以 不 能 画 出 两 条 粗细 不 同 的 线段 ,是 因为 浏览 器 默认 只 有 一 
条 路 径 ,而 对 于 这 条 路 径 的 线 宽 属性 只 有 一 个 ,后 设置 的 属性 将 会 覆盖 之 前 的 设置 ,从 而 呈 


现 第 二 次 设置 的 20px 的 线 宽 ,而 不 是 5px。 
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7.6 不 使 用 路 径 





为 了 画 出 两 条 各 自 独立 的 线段 ,需要 引入 路 径 , 参 考 如 下 实例 ,其 在 浏览 器 中 的 展示 效 


果 如 图 7.7 所 示 。 
文件 名 : 使 用 路 径 . html 


«! DOCTYPE HTML > 
< html lang = "en- US" 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 
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</head> 
<body> 
< canvas id= "myCanvas" width = "500" height = "300"></canvas > 
< script > 
var canvas = document.getFlementById("myCanvas"); 
var context = canvas.getContext("2d"); 


context. beginPath(); // 开 始 一 段 路 径 
context.moveTo(50,50); 

context. lineTo(250,250); 

context.lineWidth = 5; // 将 线段 粗细 设置 为 10px 
context. stroke() ; 


context. beginPath(); // 再 次 开始 一 段 新 路 径 
context. moveTo( 100, 50); 
context. lineTo( 300, 250); 
context. lineWidth = 20; // 将 线段 粗细 设置 为 20px 
context. stroke() ; 
«/script» 
</body> 
</html> 
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7.7. 使 用 路 径 


像 这 样 ,通过 调用 beginPath() 方 法 ,就 将 两 条 线段 独立 开 来 ,可 以 分 别 定义 属性 了 。 所 
谓 路 径 (path) ,具体 来 说 就 是 由 直线 或 曲线 连接 平面 上 若干 点 所 形成 。 路 径 有 时 只 是 一 段 
一 段 线段 或 曲线 ,但 有 时 也 可 以 组 成 各 种 图 形 , 接 下 来 的 内 容 会 逐步 加 深 读 者 对 路 径 的 
理解 。 


7.3.3 绘制 形状 


引入 路 径 之 后 , 便 可 以 更 准确 地 定义 图 形 。 接 下 来 画 一 个 闭合 图 形 一 一 三 角形 ,并 为 其 
填充 颜色 ,其 在 浏览 器 中 的 展示 效果 如 图 7. 8 所 示 。 


文件 名 : 绘制 = 


<! DOCTYPE HTML > 
<html lang= "en 
<head> 
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图 7.8 绘制 三 角形 
:角形 . html 


- Us"» 


< neta charset = "UTF - 8"> 


<title></t 
</head> 
<body> 


itle> 


< canvas id= "myCanvas" width = "500" height = "300"></canvas > 


< script > 


var canvas = document.getElementById("myCanvas"); 


var context = canvas. getContext("2d"); 


context 


context. 
context. 
context. 
context. 


context. 
context. 


context. 


</script> 


.beginPath(); 
moveTo(50,50); 
lineTo(250,250); 
lineTo(400,50); 
closePath(); 


fillStyle = "blue"; 
fil(); 
stroke(); 


// 开 始 一 段 路 径 


// 闭 合 路 径 


// 将 闭合 路 径 内 填充 方式 设置 为 蓝 色 
// 进 行 填充 
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</body> 
</html> 


在 这 段 代 码 中 ,我们 先 画 了 一 个 闭合 路 径 ,通过 closePath() 方 法 ,将 最 后 所 移动 到 的 点 
与 出 发 点 连接 起 来 构成 一 个 闭合 三 角形 ,closePath() 的 作用 是 补充 路 径 并 使 其 闭合 ; 然后 ， 
通过 fillStyle 确定 所 要 填充 的 颜色 为 blue, 也 就 是 蓝 色 ,当然 这 里 亦 可 使 用 类 似 于 rgb(24， 
116,205) 2k # 030303 这 样 的 颜色 代码 确定 颜色 。 通 过 颜色 代码 确定 颜色 的 方法 是 通用 的 ， 
而 且 更 为 具体 ,而 使 用 诸如 blue 这 样 的 语义 来 确定 颜色 的 方式 是 有 局 限 的 ,这 样 的 颜色 在 
不 同 浏览 器 中 所 呈现 的 具体 效果 会 有 细微 的 差别 ,请 读者 在 开发 过 程 中 选择 性 使 用 。 

这 里 值得 注意 的 是 ,填充 这 一 动作 能 够 成 功 实现 的 前 提 是 路 径 要 构成 封闭 图 形 ,否则 不 
会 有 任何 填充 效果 而 仅仅 是 线段 。 所 以 只 有 两 个 点 的 路 径 , 不 能 填充 出 任何 效果 。 同 时 ,这 
个 “能 够 构成 闭合 图 形 ” 的 条 件 也 有 些微 妙 ,填充 的 动作 之 前 可 以 不 手动 使 用 closePath() 来 
闭合 图 形 , 也 可 以 形成 多 个 闭合 图 形 , 进 行 填充 。 由 于 这 些 情 况 种 类 繁多 ,不 便 一 一 展开 , 现 
给 出 一 种 情况 ,请 看 如 下 实例 ,在 此 把 线段 的 粗细 进行 调整 ,以 放大 效果 ,请 读者 运行 以 下 代 
码 , 并 自行 观察 体会 ,思考 一 下 为 何 会 出 现 这 种 情况 ,如 图 7.9 所 示 。 有 兴趣 的 读者 可 以 进 
一 步 修改 代码 ,看 看 是 不 是 自己 预想 的 结果 。 


























图 7.9 路 径 填充 
文件 名 : 路 径 填充 . html 
<!DOCTYPE HTML > 
<html lang = "en- US" 
<head> 
< meta charset = "UTF — 8"> 
«title»«/title» 
</head> 
<body> 
< canvas id = "myCanvas" width = "500" height = "300"></canvas > 
< script > 


var canvas = document.getFlementById("myCanvas"); 


var context = canvas.getContext("2d"); 


context. beginPath(); // 开 始 一 段 路 径 
context.moveTo(50,50); 

context. lineTo(250,250); 

context. lineTo(400,50); 

context. lineTo(480, 200); 


context.lineWidth - 20; 


context. fillStyle = "$t 7CFCO0"; // 设 置 填充 颜色 
context. fill(); // 进 行 填充 
context. stroke() ; 
</script> 
</body> 
</html> 


通过 使 用 路 径 构 成 封闭 图 形 的 方式 ,可 以 画 出 各 式 各 样 的 形状 ,也 可 以 写成 函数 以 便 复 
用 。 在 这 些 图 形 中 ,有 一 个 例外 ,读者 不 用 自己 再 去 写 这 个 函数 , 那 就 是 矩形 。 可 以 通过 
strokeRect() 方 法 绘制 一 个 矩形 框 , 或 者 使 用 fillRect ) 方 法 直接 填充 一 个 矩形 框 。 请 看 如 


下 实例 ,其 在 浏览 器 中 的 展示 效果 如 图 7. 10 所 示 。 
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图 7.10 AERE 
文件 名 : HOB E. html 


<! DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
< canvas id = "myCanvas" width = "500" height = "300"»«/canvas > 
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< script> 
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 


context. strokeRect(10,10,150,100); // 绘 制 一 个 空心 矩形 杠 


context.fillStyle = " # 4682B4"; 
context. fillRect(180, 10, 150, 100); / HR 3E— EGRE 
</script > 
</body> 
</html> 
通过 运行 这 段 代 码 ,我 们 在 “画布 "上 画 了 一 个 空心 矩形 ,并 填充 出 了 另 一 个 蓝 色 矩形 。 
使 用 strokeRect() 方 法 来 绘制 空心 矩形 ,这 个 方法 需要 四 个 参数 : 前 两 个 参数 是 矩形 的 左 
上 和 角 在 屏幕 二 维 空间 内 的 坐标 x 和 y, 用 来 确定 这 个 矩形 的 位 置 ; 后 两 个 参数 是 矩形 的 长 度 
和 宽度 。“context. strokeRect(10,10,150,100); ”的 意思 是 在 屏幕 上 画 一 个 长 为 150px、 宽 
为 100px, 且 左上 角 顶 点 坐标 是 (10,10) 的 和 矩形。 类 似 地 ,我 们 为 fillRectO 〇 方法 指定 这 四 个 
参数 ,在 屏幕 二 维 空间 内 便 唯 一 确定 了 要 填充 的 矩形 (大 小 和 位 置 )。 如 果 没 有 明确 要 填充 
的 颜色 ,一 般 浏览 器 填充 默认 颜色 黑色 。 另 外 ,注意 到 在 改变 颜色 时 ,要 分 为 “填充 (fill)” 和 
“线条 绘制 (stroke) ”来 考虑 。 需 要 使 用 fillStyle 属性 来 改变 “填充 ”绘制 时 要 使 用 的 颜色 ,使 
用 strokeStyle 来 改变 “线条 绘制 "时 要 使 用 的 颜色 。 


7.3.4 绘制 曲线 


学 习 过 如 何 绘制 线段 以 及 由 多 条 线段 所 组 成 的 图 形 后 ,下 面 学 习 如 何 绘制 曲线 以 及 由 
曲线 所 组 成 的 图 形 。 首 先 认 识 一 下 弧 线 (arc)。 请 看 如 下 绘制 弧 线 的 实例 ,其 在 浏览 器 中 的 
展示 效果 如 图 7. 11 所 示 。 
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图 7.11 绘制 弧 线 


文件 名 : IM. html 


<! DOCTYPE HTML > 
<html lang = "en — US" 
<head> 
< meta charset = "UTF - 8"> 
< title></title> 
</head> 
< body> 
< canvas id = "myCanvas" width = "500" height = "300"></canvas > 
< script> 
var canvas = document.getElementById("myCanvas"); 
var context = canvas. getContext("2d"); 


context. beginPath(); 
context.lineWidth - 5; 
context. arc(250, 150, 100, (Math. PI/180) * 0, (Math. PI/180) *270,false);  // 绘 制 弧 线 
context. stroke() ; 
</script> 
</body> 
</html> 
这 段 代 码 使 用 arc() 方 法 绘制 了 一 段 曲 线 , 这 个 方法 需要 六 个 参数 ,结合 图 7.12 ,读者 
可 以 更 好 地 理解 。 弧 线 由 一 个 圆 上 指定 两 点 间 的 部 分 构成 ,arc() 方 法 本 质 上 就 是 使 用 这 种 
方式 ,前 两 个 参数 用 来 确定 所 绘 圆 弧 所 在 圆 的 圆心 位 置 坐标 ,第 三 个 参数 用 来 指定 这 个 圆 的 
半径 。 接 下 来 的 三 个 参数 用 来 指定 弧 线 来 自 哪 两 点 间 的 部 分 ,分 别 是 开始 弧度 、 终 结 弧 度 和 
顺道 时 针 方 向 。 从 上 文 代码 中 ,可 以 发 现 ,0 rad 位 于 从 圆心 出 发 向 x 轴 正方 向 延伸 的 方向 
上 。 开 始 弧 度 与 结束 弧度 都 相对 于 此 定义 。 为 了 方便 读者 理解 ,将 弧度 值 转化 为 角度 值 。 
上 文 代码 绘制 了 从 0 一 270" 的 一 段 圆 弧 ,也 就 是 从 0 一 3x/2。 从 开始 到 结束 的 方向 则 通过 
最 后 一 个 参数 确定 ,最 后 一 个 参数 代表 是 否 为 逆 时 针 , 即 true 代表 逆 时 针 方向 ,false 代表 顺 
时 针 方 向 。 
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当 我 们 知道 如 何 画 弧度 后 ,也 就 掌握 了 绘制 圆 形 、 终点 
扇形 的 能 力 。 在 这 里 不 详细 展开 ,请 读者 自行 编写 代 
码 进行 尝试 。 第 一 个 

接 下 来 学 习 贝 塞 尔 曲线 (Bezier curve) 的 绘制 。 贝 “控制 点 
塞 尔 曲 线 是 应 用 于 二 维 图 形 应 用 程序 的 数学 曲线 ,法 
国 数学 家 Pierre Bézier 第 一 个 研究 了 这 种 矢量 绘制 曲 
线 的 方法 ,并 给 出 了 详细 的 计算 公式 ,最 后 这 个 绘制 曲 






第 二 个 
控制 点 





线 的 方式 以 这 位 数学 家 的 名 字 命名 。 贝 塞 尔 曲线 的 给 ER 
制 原理 涉及 很 多 数学 知识 ,有 兴趣 的 读者 可 以 自行 去 图 7.13 贝 塞 尔 曲线 


研究 理解 ,本 书 不 详细 讲解 。 此 处 只 提供 一 个 直观 的 
理解 方式 ,如 图 7.13 所 示 。 

直观 上 来 说 ,Canvas 画布 中 绘制 贝 塞 尔 曲线 的 方法 是 由 起 点 经 过 曲线 路 径 到 达 终 点 ， 
通过 从 起 点 和 终点 分 别 引出 两 个 控制 点 来 对 曲线 的 弯曲 程度 进行 控制 。 曲 线 的 起 点 切线 连 
接 第 一 个 控制 点 ,终点 切线 连接 第 二 个 控制 点 。 曲 线 的 曲率 即 弯曲 程度 ,与 两 控制 点 到 起 
点 ,终点 的 距离 成 正比 。 距 离 越 远 ,弯曲 程度 越 大 。 绘 制 贝 塞 尔 曲 线 的 实例 如 下 ,其 在 浏览 
器 中 的 展示 效果 如 图 7. 14 所 示 。 
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7.14 绘制 贝 塞 尔 曲 线 


文件 名 : 贝 塞 尔 曲线 绘制 . html 


<! DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF - 8"> 
<title></title> 
</head> 
<body> 
< canvas id= "myCanvas" width = "500" height = "300"></canvas > 
< script> 
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 


context. beginPath(); 


context.moveTo(112, 366); // 起 始点 
context.bezierCurveTo(85, 228, 375, 320, 347, 76); ”// 绘 制 贝 塞 尔 曲线 
context. lineWidth = 4; // 将 线条 宽度 调整 为 4, 便于 展示 
context. stroke() ; 
</script> 

</body> 

</html> 

上 面 这 段 代 码 ,首先 确定 起 始点 ,然后 调用 bezierCurveTo() 来 绘制 贝 塞 尔 曲线 ,这 个 方 

法 中 的 六 个 参数 是 三 组 坐标 ,前 四 个 参数 分 别 是 起 点 切线 控制 点 二 维 坐标 和 终点 切线 控制 


点 二 维 坐标 ,最 后 两 个 参数 是 终点 坐标 。 除 了 使 用 两 个 控制 点 完成 贝 塞 尔 曲线 的 绘制 外 ， 
Canvas 画布 还 支持 使 用 一 个 控制 点 实现 贝 塞 尔 曲线 绘制 的 quadraticCurveTo() 方 法 ,有 兴 
趣 的 读者 可 以 研究 两 种 方法 背后 的 数学 原理 ,在 此 不 进行 展开 。 


7.4 绘制 文本 


在 绘制 图 形 之 外 ,可 能 还 需要 书写 文字 来 表达 更 多 的 含义 。 这 时 ,不 需要 每 一 个 字 都 通 
过 路 径 来 绘制 出 来 。Canvas 画布 支持 文本 的 绘制 ,并 且 还 可 以 改变 文本 的 位 置 、. 字 体 、 样 
式 、 大 小 等 。 下 面 这 个 实例 进行 了 简单 的 文本 绘制 ,其 在 浏览 器 中 的 展示 效果 如 图 7. 15 
所 示 。 

文件 名 : 文本 绘制 . html 


«! DOCTYPE HTML > 
< html lang = "en- US" 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
< canvas id= "myCanvas" width = "500" height = "300"></canvas > 
< script > 
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 
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context.font - "Bold 40px KaiTi"; // 使 用 中 文 楷体 
context. fillStyle = "#4682B4"; // 将 字体 颜色 设置 为 蓝 色 
context. fillText(" 你 好 ,世界 !",20, 50); // 填 充 文本 


//context. textAlign = "left"; 


context. font = "Bold 40px Helvetica"; // 使 用 字体 Helvetica 
context.strokeStyle = "#CC0000"; // 将 线条 绘制 颜色 设置 为 红色 
context. strokeText ("Hello World!",20,100); // 线 条 绘制 文本 
</script> 
</body> 
</html> 
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你 好 ， 世 界 ! 
Hello World! 





7.15 绘制 文本 


以 上 代码 分 别 绘制 了 “你 好 ,世界 1” 文 本 与 “Hello World!1” 文 本 ,分 别 采用 “填充 ”方式 
fillText() 以 及 “线条 绘制 ?方式 strokeText()。 这 两 个 方法 内 的 参数 使 用 一 致 ,第 一 个 参数 
是 所 要 绘制 的 文本 内 容 , 后 两 个 参数 是 这 个 文本 所 在 的 二 维 空间 横 纵 坐标 。 可 以 注意 到 ,中 
间 有 一 行 注释 的 代码 “context. textAlign = "left"; ”, 这 一 行 代码 的 用 处 是 设置 文本 的 对 
齐 方式 ,是 左 对 齐 还 是 右 对 齐 ,反映 到 文本 绘制 上 就 是 fillText() 和 strokeText() 方 法 中 的 
坐标 表示 什么 。 默 认 情 况 即 是 left( 左 对 齐 ) ,后 两 个 参数 所 表示 的 横 纵 坐标 指定 文本 左下 
角 的 位 置 。 若 需要 另 一 种 方式 描述 , 则 需要 将 注释 中 代码 的 对 齐 属 性 改 为 right( 右 对 齐 )， 
坐标 参数 指定 的 即 是 文本 右 下 角 的 位 置 。 另 外 ,在 绘制 文本 之 前 ,可 以 先 通过 font 属性 来 
确定 文本 字体 的 相关 特征 。 这 里 的 font 属性 类 似 于 CSS 中 的 字体 风格 设 定 。 在 实际 应 用 
中 ,对 于 字体 的 设置 还 应 基于 跨 平台 的 考虑 ,请 开发 者 尽量 使 用 各 种 操作 系统 常用 的 字体 
库 。 对 于 字体 设置 的 细节 ,请 读者 自行 搜索 CSS 的 font 用 法 或 者 网 络 安全 字体 (web safe 
font) 相 关 信 息 。 








7.5 图 像 


7.5.1 绘制 图 像 


在 很 多 应 用 场景 中 ,开发 人 员 需 要 在 画布 上 添加 已 经 存在 的 图 片 资源 ,如 用 户 的 头像 、 
游戏 的 道具 、 应 用 的 背景 等 。 这 时 ,需要 使 用 Canvas 画布 中 的 绘制 图 像 相 关 技术 。 接 下 来 
的 实例 介绍 如 何在 Canvas 画布 中 绘制 图 像 , 其 在 浏览 器 中 的 展示 效果 如 图 7. 16 所 示 。 


] ke Lo 1 8 sz 
= amp =-= 








QC | © file///C/Users/SONY/Desktop/H & xx | & © E 











图 7.16 绘制 图 像 
文件 名 : 绘制 图 像 . html 


<! DOCTYPE HTML > 
<html lang = "en- US" 
<head> 
< meta charset = "UTF - 8"> 
<title></title> 
</head> 
<body> 
< canvas id = "myCanvas" width = "500" height = "300"></canvas > 
< script» 
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 


var img = new Image(); // 声 明 一 个 Image 对 象 
img.onload = function(){ // 使 用 onload 事件 

context. drawImage( ing, 0,0) ; 第 
h 7 
img.src = "dog. jpg"; // 通 过 url 加 载 图 片 资源 = 
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</script> 

</body> 

</html> 

以 上 代码 实现 了 在 画布 中 添加 一 张 现 有 图 片 的 功能 。 首 先 , 初 始 化 一 个 Image 对 象 ， 
并 用 变量 img 来 指 代 这 个 对 象 。Image 对 象 里 封装 了 绘制 一 个 图 像 所 必需 的 一 些 属性 和 方 
ik. img. src 用 来 指定 所 要 使 用 的 图 片 资 源 ,这 里 使 用 统一 资源 定位 符 来 指明 图 片 资源 的 
位 置 , 供 浏 览 器 选取 。“context. drawImage(img.0.00; ”这 条 语句 用 来 绘制 动作 。 其 中 调 
用 了 drawImage() 的 绘图 方法 ,第 一 个 参数 是 要 添加 的 图 片 对 象 , 即 最 开始 声明 并 指定 了 图 
片 资源 的 img 变量 ; 之 后 的 两 个 参数 用 来 确定 图 片 在 画布 上 的 相对 位 置 ,这 两 个 参数 指 图 
片 左 上 角 在 画布 二 维 空间 内 的 坐标 位 置 。 在 当前 的 例子 中 ,图 片 的 左上 角 位 于 (0,0) 即 画布 
的 左上 角 。 当 图 片 的 尺寸 大 于 画布 时 ,图 片 在 画布 上 只 显示 部 分 图 像 ,并 且 图 片 比 例 不 会 有 
任何 变化 。 

相信 很 多 读者 对 于 上 面 的 这 段 代 码 有 些 疑 问 : 为 什么 不 能 先 确 定 资 源 再 进行 图 像 的 绘 
制 ? 这 种 方法 的 代码 如 下 。 

«script» 


var canvas = document. getElementById("myCanvas") ; 
var context = canvas.getContext("2d"); 


var img = new Image(); 
img. src = "dog. jpg"; 
context. drawImage( img, 0,0); 
</script> 
如 果 这 样 写 代码 ,就 会 发 现 浏览 器 不 能 加 载 出 图 片 。 之 所 以 这 样 ,是 因为 图 片 的 加 载 需 
要 时 间 ,直接 这 样 书写 ,不 能 保证 drawImage() 在 图 片 加 载 之 后 执行 ,大 多 数 情况 下 图 片 还 
未 加 载 出 来 ,就 已 经 执行 到 了 drawImage() ,而 此 时 的 Image 对 象 并 未 完全 定义 。 为 了 避免 
这 样 的 情况 ,需要 像 第 一 段 代 码 那样 使 用 onload 事件 ,在 页 面 加载 完 所 有 内 容 后 (包括 图 
像 、 脚 本 文件 .CSS 文件 等 ) ,执行 onload 事件 处 理 函 数 , 在 这 里 , 即 调用 drawImage() 方 法 ， 
这 样 所 要 添加 的 图 像 资 源 才能 正常 地 在 画布 上 绘制 。 


7.5.2 图 像 缩放 与 裁剪 


对 于 一 个 图 片 ,往往 不 会 按照 原 尺 寸 直接 显示 在 某 个 网 页 上 ,这 样 会 造成 一 些 较为 清晰 
的 图 片 占据 页 面 过 大 的 空间 ,所 以 需要 对 所 绘制 的 图 像 进行 缩放 或 裁剪 。 这 时 使 用 同样 的 
drawlImage() 方 法 ,不 同 的 是 参数 的 个 数 有 所 改变 ,需要 额外 的 两 个 参数 定义 图 片 长 度 和 宽 
EE. 下面 的 实例 实现 了 图 片 的 缩放 ,其 在 浏览 器 中 的 展示 效果 如 图 7. 17 所 示 。 

文件 名 : 图 像 的 缩放 . html 


<! DOCTYPE HTML > 
<html lang = "en — US"> 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 





</head> 
< body> 
< canvas id = "myCanvas" width = "500" height = "300"></canvas > 
«script» 
var canvas = document. getElementById("myCanvas") ; 
var context 7 canvas.getContext("2d"); 


var img = new Image(); // 声 明 一 个 Image 对 象 


img.onload = function()( //f Fl onload 事件 
context. drawImage( img, 0, 0, 100, 400) ; 
// 参 数 : 图 像 对 象 ,图 像 x 坐标 , 图像 y EER, ERTE EE , 图像 高 度 
H 
img.src = "dog. jpg"; / [38 i url 加 载 图 片 资源 
</script> 
</body> 
</html > 
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7.17 图 像 的 缩放 


这 样 便 绘制 了 一 张 宽度 为 100px、 高 度 为 400px 的 图 像 ,由 于 长 宽 比 与 原 图 片 不 一 
致 ,导致 所 绘制 图 像 相 比 于 原 图 好 像 拉 长 了 。 在 接 下 来 的 这 个 实例 中 ,继续 改变 
drawImage() 方 法 的 参数 设置 ,来 实现 图 像 裁剪 的 效果 。 该 实例 在 浏览 器 中 的 展示 效果 


如 图 7.18 所 示 。 
文件 名 : 图 像 的 裁剪 . html 


<! DOCTYPE HTML > 
< html lang = "en- US"> 
<head> 
< neta charset = "UTF - 8"> 
«title»«/title» 
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</head> 
<body> 
< canvas id = "myCanvas" width = "500" height = "300"»«/canvas > 
«script» 
var canvas = document. getElementById("myCanvas" ) ; 
var context 7 canvas.getContext("2d"); 


var img - new Image() ; // 声 明 一 个 Image 对 象 
img.onload = function(){ // 使 用 onload 事件 


context. drawImage( ing, 25, 30, 183, 200, 0, 0, 183, 200) ; 
// 参 数 : 图 像 对 象 ,裁剪 开始 x 坐标 ,裁剪 开始 Y 坐 标 ,裁剪 宽度 ,裁剪 高 度 , 图像 x 坐标 ,图像 Y 


坐标 , 图像 宽度 ,图 像 高 度 
}; 
img.src = "dog. jpg"; // 通 过 url 加 载 图 片 资源 
</script > 
</body> 
</html > 





7.18 图 像 的 裁剪 


这 次 的 参数 设置 与 之 前 有 较 大 区 别 , 此 次 drawImage() 方 法 在 之 前 的 基础 上 又 多 出 了 
四 个 参数 。 简 单 来 说 ,裁剪 的 过 程 就 是 从 原 图 片上 选择 一 个 起 始 坐标 作为 裁剪 区 域 的 左上 
角 , 然 后 通过 宽度 和 高 度 确定 裁剪 区 域 , 之 后 确定 新 图 像 在 画布 上 的 坐标 和 宽 高 。 这 样 就 不 
难 理解 这 个 方法 的 参数 组 成 : 第 一 个 参数 为 原 图 像 对 象 ; 之 后 四 个 参数 用 来 确定 裁剪 区 
域 , 分 别 是 裁剪 开始 的 x 坐标 与 y 坐标 ,以 及 裁剪 区 域 的 宽度 与 高 度 ; 再 之 后 的 四 个 参数 则 
用 来 描述 裁剪 出 来 的 新 图 像 在 画布 上 的 表现 ,分 别 是 新 图 像 的 x 坐标 与 y 坐标 ,以 及 新 图 像 
的 宽度 与 高 度 。 通 过 上 述 代 码 , 即 可 为 图 片 中 的 狗 狗 裁 剪 出 一 个 “证 件 照 ”。 


7.5.3 像素 处 理 


像素 (pixel) 是 屏幕 上 由 数字 序列 表示 的 图 像 中 的 最 小 单位 ,可 能 很 多 人 都 试图 放大 过 
图 像 ,在 不 断 放 大 图 像 的 过 程 中 ,会 发 现 图 片 并 不 能 无 限 放 大 , 当 放 大 到 一 定 程 度 后 ,图 片 就 
会 明显 失真 ,并 且 在 边缘 处 出 现 参差 不 齐 的 色 块 ,这 一 个 个 小 的 色 块 就 是 一 个 基本 的 像素 
点 ,长 宽 均 为 一 像素 。 我 们 在 屏幕 上 见 到 的 所 有 图 像 都 是 由 一 个 个 像 这 样 的 单一 颜色 的 像 
素 点 组 成 的 。 如 何 对 这 些 像 素 点 操作 就 是 本 节 的 主要 内 容 ,HTML5 Canvas 支持 像素 操 
作 , 但 是 出 于 安全 考虑 ,像素 操作 只 能 在 服务 器 环境 下 执行 ,截至 目前 ,Canvas 画布 尚 不 支 
持 在 本 地 的 HTML 文件 内 调用 相关 方法 。 

在 现实 生活 中 ,我 们 在 使 用 相机 时 可 以 添加 各 式 各 样 的 滤 镜 效果 ,使 拍 出 的 照片 不 单单 
是 眼前 所 见 之 景 的 复制 ,而 是 添加 不 同 的 特殊 效果 。 这 就 是 通过 对 图 像 的 像素 点 颜色 进行 
某 种 算法 得 到 的 。 本 节 以 灰 度 效果 和 反 转 效果 为 例 进 行 介绍 ,有 兴趣 的 读者 可 以 在 互联 网 
上 搜索 更 高 级 的 算法 ,为 图 像 添加 更 丰富 的 效果 。 

首先 看 灰 度 效果 实例 ,即将 彩色 图 片 变 为 黑白 图 片 。 为 了 执行 这 些 效果 ,代码 中 将 添加 
按钮 以 及 单 击 事件 来 触发 像素 操作 的 相关 函数 ,该 实例 在 浏览 器 中 的 展示 效果 如 图 7. 19 
所 示 。 


(3) localhost:8088/pixel.h: x 
C [O localhost8088/pixel html ur) son: 














7.19 灰 度 效果 
文件 名 : 灰 度 效 果 . html 


«! DOCTYPE HTML > 
< html lang = "en- US" 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
< canvas id = "myCanvas" width = "500" height = "300"></canvas > 
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<br /> 
< input type = "button" value = "grayscale" id= "grayscale"/» 
«script» 
var img = new Image(); // 声 明 一 个 Image 对 象 
img. src = "dog. jpg"; // 通 过 url 加 载 图 片 资 源 
img. onload = function(){ // 使 用 onload 事件 
draw(this); 


}; 
function draw( img) ( 
var canvas = document. getElementById("myCanvas"); 
var context = canvas. getContext("2d"); 
context. drawImage( img, 0, 0); 
img. style. display = 'none'; 
var imageData = context. getImageData(0, 0, img. width, img. height); 
var data = imageData. data; 
var grayscale = function() { 
for (var i = 0; i< data. length; i += 4) ( 
var avg = (data[i] + data[i + 1] + data[i + 2]) / 3; 
data[i] = avg; // red 
data[i + 1] = avg; // green 
data[i + 2] = avg; // blue 
} 
context. putImageData( imageData, 0, 0); 
}; 


var grayscalebtn = document. getElementById( 'grayscale'); 
grayscalebtn. addEventListener('click',grayscale); 
2o 
</body> 
«/htnl > 
上 述 实 例 在 HTML 页 面 里 添加 了 一 个 按钮 ,并 通过 按钮 触发 了 一 个 我 们 自己 定义 的 
灰 度 效果 函数 。 像 素 操作 的 基础 是 能 够 访问 这 些 Canvas 中 的 像素 点 ,通过 getImage 
Data() 的 方法 即 可 选取 并 访问 所 要 进行 操作 的 像素 点 对 象 。 其 中 四 个 参数 分 别 是 选取 像素 
处 理 区 域 的 开始 点 的 x 坐 标 和 y 坐 标 , 以 及 选取 的 宽度 和 长 度 。 有 了 这 些 像 素 点 对 象 后 ,再 
通过 其 属性 访问 像素 点 背后 的 数据 。 代 码 中 定义 了 一 个 data 变量 ,并 指向 像素 点 对 象 的 
data 子 对 象 ,data 子 对 象 由 一 段 序列 组 成 ,描述 了 选取 部 分 图 像 的 像素 构成 ,每 四 个 为 一 
组 ,定义 了 每 个 像素 的 RG、B 以 及 alpha 通道 ,一 共 四 个 值 。 接 下 来 便 是 我 们 自己 定义 的 
灰 度 函数 grayscale() ,所 谓 灰 度 效 果 处 理 ,就 是 将 R.G、B 三 个 值 求 平均 ,不 操作 alpha 值 ， 
在 for 循环 中 便 是 这 样 进行 处 理 的 。 最 后 ,再 将 操作 完成 的 对 象 通过 putImageData( ) 传 回 
给 原画 布 ,putImageData() 内 的 三 个 参数 便 是 要 传人 的 图 像 对 象 以 及 所 传人 图 像 的 左上 角 
在 画布 中 的 初始 坐标 位 置 。 在 服务 器 环境 下 运行 之 后 , 单 击 页 面 中 的 按钮 触发 函数 ,画布 上 
的 图 像 便 会 产生 相应 的 效果 。 
下 面 介绍 另 一 个 像素 操作 一 一 反 转 。 该 操作 的 代码 写法 与 灰 度 操 作 代 码 整体 相似 ,不 
同 的 是 具体 对 像素 点 的 运算 方式 。 反 转 效 果 通 过 取 每 个 像素 点 RR、G、B 的 反 (255 一 原 值 ) 来 


实现 相应 效果 。 下 面 这 个 实例 实现 了 图 像 的 反 转 效果 ,其 在 浏览 器 中 的 展示 效果 如 图 7. 20 


所 示 。 





@ localhost8088/reverse x 








€ 











图 7.20 反 转 效果 
文件 名 : 反 转 效果 . html 


«! DOCTYPE HTML > 
< html lang = "en - US"> 
<head> 
< meta charset = "UTF - 8"> 
«title»«/title» 


</head> 
< body> 
< canvas id = "myCanvas" width = "500" height = "300"></canvas > 
<br /> 
< input type = "button" value = "reverse" id = "reverse"/> 
< Script> 
var img = new Inage(); // 声 明 一 个 Image 对 象 
img.src = "dog. jpg"; // 通 过 url 加 载 图 片 资源 
img.onload = function(){ // 使 用 onload 事件 
draw(this); 
}; 


function draw( img){ 
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 
context. drawImage( img, 0,0); 
img.style.display - 'none'; 
var imageData = context. getImageData(0, 0, img. width, img. height); 
var data - imageData. data; 
var reverse - function() ( 
for (vari = 0; i< data. length; i += 4) { 
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data[i] = 255 - data[i]; // red 

data[i + 1] = 255 - data[i*1]; // green 
data[i + 2] = 255 - data[i*2]; // blue 
) 

context.putlmageData(imageData, 0, 0); 

E 


var reversebtn = document.getElementById( 'reverse'); 
reversebtn. addEventListener( 'click', reverse); 


) 
</script> 
</body> 
</html> 


单 击 按钮 后 ,浏览 器 便 会 将 画布 上 的 选取 部 分 像素 做 取 反 处 理 , 该 效果 类 似 于 以 前 胶卷 
上 的 底片 效果 。 


7.6 BA 影 


阴影 效果 是 图 形 相关 应 用 中 最 为 常用 的 效果 之 一 ,在 实体 的 旁边 添加 一 个 模糊 的 影子 
常常 能 给 观察 者 带 来 视觉 上 的 立体 感 ,仿佛 图 形 飘浮 于 平面 之 上 。 带 有 阴影 的 图 形 可 以 使 
图 形 更 加 富有 表现 力 ,更 为 立体 。 

下 面 这 个 实例 实现 了 为 一 个 矩形 图 形 添加 阴影 ,其 在 浏览 器 中 的 展示 效果 如 图 7. 21 
所 示 。 
ela) 
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7.21 为 图 形 添加 阴影 


文件 名 : 为 图 形 添 加 阴影 . html 


<!DOCTYPE HTML > 
<html lang = "en- US" 


X head» 
< meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
< canvas id = "myCanvas" width = "500" height = "300"»«/canvas > 
< script» 
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 


context. rect(40, 40, 100, 100); 
context. fillStyle = "#00688B"; 


context.shadowColor = "#121212"; // 设 置 阴影 颜色 

context. shadowBlur = 20; // 设 置 阴影 的 模糊 程度 
context. shadow0ffsetX = 15; // 设 置 阴影 的 x 方向 偏 移 量 
context. shadowOffsetY = 15; // 设 置 阴影 的 Y 方 向 偏 移 量 


context. fill(); 
</script> 
</body> 
</html> 


默认 情况 下 ,在 画布 上 绘制 的 图 形 不 具有 阴影 效果 。 在 添加 阴影 时 ,需要 为 阴影 确定 如 
下 性 质 ,分 别 是 shadowColor 阴影 的 颜色 .shadowBlur 阴影 的 模糊 程度 ,以 及 阴影 在 x 和 y 
轴 上 的 偏 移 量 shadowOffsetX 和 shadowOffsetY。 在 确定 了 这 些 属 性 后 ,阴影 方 可 正确 添 
加 。 读 者 可 以 通过 调整 这 些 属性 的 值 来 体会 Canvas 构造 阴影 的 过 程 。 所 谓 阴影 ,从 现实 生 
活 角度 去 理解 ,就 是 来 自 某 一 方向 上 的 光照 到 一 个 物体 上 ,物体 会 谈 挡 一 部 分 的 光 , 并 在 光 
照 方向 上 留 下 一 个 相对 模糊 的 影子 。Canvas 就 是 在 模仿 这 一 过 程 。 通 过 上 述 实例 ,可 以 看 
出 Canvas 画布 所 绘制 的 阴影 其 实 就 是 偏离 原 图 形 的 一 个 模糊 的 副本 ,因此 在 绘制 阴影 前 我 


们 需要 确定 以 上 的 这 些 属性 。 


当然 ,在 设置 了 阴影 过 后 ,不 仅仅 是 图 形 会 出 现 阴影 ,在 画布 上 绘制 的 文字 、 图 片 都 会 带 
有 相应 的 阴影 效果 。 下 面 这 个 实例 展示 了 文字 的 阴影 效果 ,其 在 浏览 器 中 的 展示 效果 如 


图 7. 22 所 示 。 
文件 名 : 为 文字 添加 阴影 . html 


«! DOCTYPE HTML > 
< html lang = "en- US" 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
«canvas id- "myCanvas" width = "500" height = "300"></canvas > 
< script > 
var canvas = document.getElementById("myCanvas"); 


Canvas 5 # 


LESE 


HTMLS £ JJ ## 


D 文字 添加 阴影 html i 
€ > Q [O fie//C/Users/SONY/Desktop/H 儿女 | $ @ R) : 














FESTOS 


7.22 为 文字 添加 阴影 


var context = canvas.getContext("2d"); 


context. 


context. 
context. 
context. 
context. 
context. 
context. 


context. 
context. 
context. 
context. 
context. 
context. 


</script> 
</body> 
</html> 


font = "Bold 30px Arial"; 


fillStyle = "#00688B"; 
shadowColor = "#121212"; 
shadowBlur = 15; 

ShadowOffsetX = 15; 
ShadowOffsetY - 15; 
fillText(" 大 海 啊 都 是 水 ",30, 50); 


fillStyle = "i FAFAFA"; // 将 填充 颜色 变 为 白色 
shadowColor = "i 191970"; 

shadowBlur - 20; 

ShadowOffsetX - 0; 

SshadowOffsetY = 0; 

fillText(" 验 马 啊 四 条 腿 ",30, 200) ; 


7.7 填 充 


在 之 前 讲解 图 形 的 绘制 时 ,我 们 通过 填充 闭合 图 形 认识 了 fillStyle 这 个 属性 。 当 时 将 
这 个 属性 设置 为 了 一 个 特定 的 颜色 代码 ,然后 便 可 以 将 指定 的 颜色 填充 到 闭合 图 形 内 。 除 
了 填充 纯 颜 色 或 是 带 有 透明 度 的 颜色 之 外 ,Canvas 画布 也 支持 填充 图 案 和 渐变 效果 。 


7.7.1 RAF 


填充 图 案 有 很 多 应 用 场景 ,比如 要 给 一 个 区 域 添 加 一 个 木质 图 案 , 使 其 拥有 木质 的 纹 
理 ; 再 如 绘制 墙纸 ,使 用 一 个 图 案 反 复出 现 构 成 一 张 墙纸 。 或 者 只 是 想 让 某 些 图 案 反 复出 
现 , 成 为 精神 污染 。 下 面 以 “精神 污染 ”为 实例 进行 讲解 ,其 在 浏览 器 中 的 展示 效果 如 图 7. 23 
所 示 。 
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图 7.23 填充 图 案 
文件 名 : 填充 图 案 . html 


«! DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF - 8"> 
<title></title> 
</head > 
<body> 
< canvas id = "nyCanvas" width = "500" height = "300"></canvas > 
«script» 
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 


var img = new Inage(); // 声 明 一 个 Image 对 象 

img.src = "doge. jpg"; // 通 过 url 加 载 图 片 资源 

img. onload = function(){ // 使 用 onload 事件 
var pattern = context.createPattern(img,"repeat"); // 创 建 一 个 图 案 
context.fillStyle = pattern; // 将 填充 样式 指定 为 我 们 的 图 案 
context.rect(0,0,canvas.width,canvas.height); // 绘 制 一 个 画布 大 小 的 矩形 7 
context. fill(); 章 
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); 
</script> 

</body> 

</html> 

在 这 个 实例 中 ,还 是 先 通过 img 变量 加 载 一 个 本 地 的 图 片 资源 ,使 用 onload 事件 在 图 
片 加 载 后 进行 下 一 步 的 操作 。 然 后 ,在 onload 事件 内 创建 图 案 , 其 中 使 用 createPattern() 
方法 创建 图 案 ,该 方法 需要 传人 两 个 参数 : 一 是 图 片 对 象 ; 二 是 指定 的 重复 方式 。 我 们 选 
择 的 是 repeat, 即 全 方向 平 铺 。 除 此 之 外 ,还 可 以 通过 传人 repeat-x, repeat-y 或 no-repeat 
来 指定 是 只 在 x 方向 重复 还 是 只 在 y 方 向 上 重复 ,或 是 不 重复 (仅仅 作为 图 片 填充 进去 )。 
最 后 绘制 一 个 与 画布 等 大 的 矩形 作为 填充 区 域 并 填充 图 案 。 这 里 值得 注意 的 是 所 填充 的 图 
案 的 尺寸 选择 , 当 需 要 重复 效果 时 ,所 填充 的 图 形 大 小 一 般 应 为 较 小 的 图 片 , 并 且 需 要 将 
createPattern() 传 人 的 重复 方式 参数 置 为 repeat, 从 而 可 以 实现 图 案 的 重复 出 现 。 而 当 仅 
仅 想 填充 一 个 图 片 进 入 指定 区 域 时 , 则 需要 选择 合适 的 图 片 尺寸 并 向 createPattern() 传 人 
no-repeat, 或 者 仅仅 是 像 之 前 绘制 图 像 那 样 进行 绘制 。 


7.7.2 填充 渐变 


填充 渐变 (gradient) 的 过 程 与 填充 图 案 的 过 程 十 分 相似 ,都 需要 先 通过 Canvas 的 方法 
构造 所 要 填充 的 样式 ,并 将 fillStyle 属性 设置 为 自 定义 的 样式 ,然后 填充 。 所 谓 渐变 颜色 ， 
即 是 从 一 种 颜色 沿 某 个 方向 过 渡 到 另 一 种 颜色 。Canvas 画布 支持 两 种 渐变 模式 : 一 种 是 
线性 渐变 (linear gradient); 另 一 种 是 径 向 渐变 (radial gradient) 。 

下 面 通过 一 个 实例 来 认识 一 下 线性 渐变 ,其 在 浏览 器 中 的 展示 效果 如 图 7. 24 所 示 。 
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7.24 绘制 线性 渐变 


文件 名 : 绘制 线性 渐变 . html 


<!DOCTYPE HTML > 


< html lang = "en 一 US"> 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
< canvas id= "myCanvas" width = "500" height = "300"></canvas > 
< script» 
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 


var gradient = context.createLinearGradient(0,0,200,0); ”// 创 建 线性 渐变 


gradient. addColorStop(0, "blue"); // 指 定 渐变 颜色 
gradient. addColorStop(1, white"); 


context.fillStyle - gradient; // 将 填充 样式 设置 为 所 创建 的 渐变 色 
context. rect(0, 0,200,200); 
context. fill(); 

</script> 

</body> 

</html> 

上 面 的 这 个 实例 给 一 个 宽 为 200px 的 正方 形 填充 了 渐变 色 。 在 代码 的 开始 ,首先 通过 
Canvas 的 createLinearGradient() 方 法 创建 渐变 色 对 象 。 其 中 向 这 个 方法 传人 了 四 个 参数 ， 
作为 渐变 颜色 的 开始 坐标 和 结束 坐标 ,用 来 指明 渐变 的 
方向 和 范围 。 可 能 读者 会 对 这 两 个 坐标 产生 困惑 ,我 们 
可 以 形象 地 理解 为 在 一 个 轩 新 的 画布 上 确定 渐变 色 的 开 
始 坐标 和 结束 坐标 ,以 此 确定 纯 颜 色 从 哪里 开始 逐渐 发 
生变 化 到 哪里 终止 变 成 另外 一 种 纯 颜 色 。 当 要 在 画布 上 
的 闭合 路 径 内 填充 某 一 颜色 时 ,应 根据 闭合 路 径 的 相对 
位 置 来 确定 闭合 路 径 内 到 底 应 该 是 哪 种 颜色 ,参考 
图 7.25, 闭 合 路 径 的 具体 坐标 位 置 决定 了 其 所 填充 的 渐 图 7 25 闭合 路 征 内 的 渐变 色 填充 
变 颜 色 是 哪 一 部 分 。 

在 创建 渐变 颜色 后 ,还 需 指 定 具体 的 渐变 颜色 以 及 怎样 渐变 。 通 过 渐变 色 对 象 的 
addColorStop() 方 法 来 指定 具体 的 渐变 颜色 和 渐变 方式 。addColorStop() 的 第 一 个 参数 用 
来 指定 颜色 在 渐变 区 域内 的 渐变 范围 ,其 取 值 为 0 一 1, 用 来 表示 渐变 颜色 的 构成 范围 。 该 
方法 的 第 二 个 参数 用 来 指定 具体 的 颜色 ,实例 中 使 用 的 是 常用 颜色 的 字符 串 表 示 ,当然 也 可 
以 用 颜色 代码 来 表示 。addColorStop() 是 可 以 多 次 调用 的 ,用 来 实现 多 颜色 渐变 。 参 考 如 
下 实例 可 进一步 理解 渐变 色 对 象 的 addColorStop() 方 法 中 的 第 一 个 参数 的 含义 ,该 实例 在 
浏览 器 中 的 展示 效果 如 图 7. 26 所 示 o 

文件 名 : 添加 多 种 颜色 渐变 . html 


<!DOCTYPE HTML > 
<html lang = "en- US"> 
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<head> 
< meta charset = "UTF 一 8"> 
<title></title> 
</head> 
<body> 


< canvas id = "myCanvas" width = "500" height = "300"»«/canvas > 
< script» 
var canvas = document.getElementById("myCanvas"); 


var context = canvas.getContext("2d"); 


var gradient = context.createLinearGradient(0,0,200,0); 


gradient. addColorStop(0, "blue" ); 
gradient. addColorStop(0. 25, green"); 
gradient. addColorStop(0.5, gray"); 
gradient. addColorStop(0. 75, red"); 
gradient. addColorStop(1, "white"); 


context.fillStyle - gradient; 
context. rect(0,0,200, 200) ; 
context. fill(); 
</script> 
</body> 
</html> 
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图 7.26 添加 多 种 颜色 渐变 


我 们 重点 关注 渐变 色 对 象 的 多 次 addColorStop() 调 用 时 的 第 一 个 参数 ,这 个 参数 指定 
的 是 各 颜色 的 开始 所 在 的 分 位 点 ,以 0 一 1 的 小 数 来 指定 各 分 位 点 的 位 置 ,关于 上 述 实 例 的 


多 次 执行 addColorStop() 的 含义 可 以 借助 图 7. 27 bie gen gay ri wiit 
所 示 的 线段 图 来 更 直观 地 理解 。 0 o9 os o5 1 

除了 线性 渐变 方式 ,Canvas 也 支持 径 向 渐变 图 7.27 添加 多 种 渐变 色 的 分 位 点 参数 
(radial gradient) , 径 向 渐变 的 构成 是 由 一 个 圆 向 
另 一 个 圆 的 渐变 ,由 于 渐变 方式 从 直观 上 说 是 由 内 向 外 的 或 由 外 向 内 的 ,所 以 也 可 以 称 为 放 
射 性 渐变 。 下 面 这 个 实例 就 展示 了 径 向 渐变 的 基本 使 用 ,其 在 浏览 器 中 的 展示 效果 如 
图 7. 28 所 示 。 
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E 7.28 径 向 渐变 添加 
文件 名 : 添加 径 向 渐变 . html 


<!DOCTYPE HTML > 
<html lang = "en - US"> 
<head> 
< meta charset = "UTF - 8"> 
<title></title> 
</head> 
<body> 
< canvas id = "myCanvas" width = "500" height = "300"></canvas > 
< script > 
var canvas = docunent.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 


var gradient = context.createRadialGradient(100,100,10,100,100,60); 


gradient. addColorStop(0, "white"); 
gradient. addColorStop(1, "black"); 


context.fillStyle = gradient; 
context. rect(0,0, 200,200) ; 
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context. fill(); 
</script> 

</body> 

</html> 

在 添加 径 向 渐变 时 ,与 添加 线性 渐变 相似 , 需 先 创建 一 个 渐变 色 对 象 ,与 之 前 不 同 的 是 ， 
这 次 使 用 的 方法 是 createRadialGradient() ,该 方法 需要 六 个 参数 ,三 个 一 组 ,分 别 用 来 确定 
开始 渐变 的 圆 和 结束 渐变 的 圆 。 前 三 个 参数 为 开始 渐变 圆 的 圆心 x 坐标 与 y 坐标 ,以 及 圆 
的 半径 。 后 三 个 参数 则 为 外 圆 的 相应 数据 。 然 后 同 添加 线性 渐变 的 方法 一 样 ,调用 
addColorStop() 来 指定 渐变 的 颜色 。 这 里 值得 注意 的 是 createRadialGradient() 方 法 的 使 
用 ,该 方法 的 六 个 参数 用 来 确定 开始 渐变 圆 和 结束 渐变 圆 ,尽管 我 们 可 以 随意 指定 圆 的 位 置 
和 大 小 ,但 为 了 正确 地 绘制 径 向 渐变 颜色 不 出 现 颜 色 空白 ,应 尽量 保证 两 个 圆 中 ,一 个 圆 在 
另 一 个 圆 内 ,尽量 不 相 切 或 相交 ; 否则 ,就 会 出 现 图 7.29 所 示 的 现象 ,下 面 的 实例 虽然 指定 
了 黄色 与 黑色 ,但 是 出 现 了 一 部 分 空白 。 
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图 7.29 特殊 情况 径 向 渐变 
文件 名 : 径 向 渐变 的 特殊 情况 . html 


<! DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
< canvas id= "myCanvas" width = "500" height = "300"></canvas > 
< script > 
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 


var gradient = context.createRadialGradient(100,100,10,100,150,60); 


gradient. addColorStop(0, "yellow"); 
gradient. addColorStop(1, "black"); 


context.fillStyle - gradient; 
context. rect(0,0, 200,200) ; 
context. fill(); 
</script> 
</body> 
</html> 


其 中 两 圆 的 关系 如 图 7. 30 所 示 。 


7.8 组 合 图 形 


很 多 复杂 的 图 形 其 实 都 是 由 若干 简单 图 形 组 合 而 来 的 ,如 世界 上 各 个 国家 的 国旗 ,许多 
产品 的 商标 等 。 有 时 几 个 简单 图 形 是 相互 分 离 的 ,有 时 简单 图 形 之 间 有 重 秋 现象。 为 了 更 
好 地 掌控 图 形 之 间 的 相互 重 秋 规则 ,绘制 出 理想 的 样式 , 接 下 来 学 习 组 合 图 形 。 对 于 组 合 图 
形 而 言 ,需要 控制 的 是 图 形 之 间 的 层次 , 谁 位 于 上 方 以 及 如 何 交 释 。 图 形 之 间 的 层次 由 绘图 
顺序 决定 ,后 绘制 的 图 形 会 位 于 先 绘制 的 图 形 上 方 ,在 交合 时 会 出 现 遮 挡 。Canvas 通过 设 
置 透明 度 来 决定 “遮挡 ”的 强 弱 , 而 合成 操作 则 负责 以 何 种 形式 交 秋 组 合 。 


7.8.1 透明 度 


透明 度 的 设置 能 够 弱化 图 形 的 遮挡 关系 ,从 完全 看 不 见 到 能 够 看 见 下 方 的 图 形 ,甚至 上 
方 图 形 完全 消失 ,都 可 以 通过 设置 透明 度 来 实现 。 另 外 ,如 今 的 很 多 网 站 为 了 使 用 户 获得 更 
为 舒适 的 视觉 体验 ,也 常常 采用 带 有 一 定 透明 度 的 颜色 ,使 网 站 配色 更 加 柔和 。 接 下 来 学 习 
如 何 设置 颜色 的 透明 度 。 下 面 这 个 实例 展现 了 两 个 等 大 且 填 充 为 深 紫 色 的 圆 形 : 一 个 没有 
透明 度 设 置 , 另 一 个 有 透明 度 设 置 , 其 在 浏览 器 中 的 展示 效果 如 图 7. 31 所 示 。 

文件 名 : 透明 度 . html 


<!DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF - 8"> 
«title»«/title» 
</head> 
<body> 
< canvas id= "myCanvas" width = "500" height = "300"></canvas > 
< script > 
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 


Ed 7.30 径 向 渐变 特殊 圆 相 切 


context.arc(100,100,50,0,2 * Math.PI); 
context.fillStyle - "rgb(32,18,77)"; // 将 颜色 设置 为 深 紫色 ,无 透明 参数 
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context. fill(); 


context. beginPath(); 
context.arc(250,100,50,0,2 * Math. PI); 
context.fillStyle = "rgba(32,18,77,0.5)"; // 同 样 的 颜色 ,增加 透明 参数 
context. fill(); 
«/script» 
</body> 
</html> 
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7.31 透明 度 


通过 代码 可 以 注意 到 ,在 改变 填充 颜色 时 , 相 比 于 普通 的 vb (32.18.77) ,第 二 个 圆 使 
用 了 不 同 的 颜色 设置 方式 rgba(32.18.77.0.5)。 其 中 ,在 带 有 透明 度 的 颜色 设置 方式 rgba 
组 合 中 ,除了 前 三 个 代表 红 (red) , S Cgreen) 、 蓝 (blue) 外 多 了 一 个 a(alpha) 。 参 数 a 用 来 表 
示 透 明 的 程度 , 取 值 范围 为 0 一 1,0 代表 完全 透明 乃至 没有 颜色 ,1 代表 完全 不 透明 。 在 不 
设置 透明 度 的 情况 下 ,颜色 的 设置 默认 为 完全 不 透明 。 这 就 解释 了 第 一 个 圆 相 比 于 第 二 个 
圆 颜 色 更 深 的 原因 。 当 然 , 对 于 颜色 透明 度 也 可 以 单独 设置 ,并 使 用 十 六 进 制 颜色 代码 。 下 
面 这 个 实例 的 运行 效果 与 上 一 个 实例 相同 ,但 设置 方式 不 同 。 

文件 名 : 透明 度 单独 设置 . html 


<! DOCTYPE HTML > 
< htnl lang = "en- US"> 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
< canvas id= "myCanvas" width = "500" height = "300"></canvas > 


< script > 


var canvas = document.getElementById("myCanvas"); 
var context 7 canvas.getContext("2d"); 


context.arc(100,100,50,0,2 * Math.PI); 


context.fillStyle = "#20124d"; // 将 颜色 设置 为 深 紫色 ,无 透明 参数 设置 


context. fill(); 


context. beginPath(); 
context.arc(250,100,50,0,2 * Math.PI); 
context. fillStyle = "4 20124d"; // 同 样 的 颜色 
context.globalAlpha = 0.5; 
context. fill(); 
</script> 
</body> 
</html> 
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颜色 共同 作用 会 形成 新 的 颜色 ,下 面 这 个 实例 展示 了 三 个 填充 为 带 有 透明 度 颜 色 的 圆 
形 , 其 在 浏览 器 中 的 运行 效果 如 图 7.32 所 示 。 请 读者 观察 体会 重 秋 区域 与 其 他 部 分 的 


颜色 对 比 。 
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图 7.32 带 有 透明 度 颜色 交 和 至 
文件 名 : 带 有 透明 度 颜色 交友 .html 


«! DOCTYPE HTML > 
< htnl lang = "en — US"> 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 
</head> 
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<body> 
< canvas id= "myCanvas" width = "500" height = "300"»«/canvas > 
< script > 
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 


context.arc(170,200,50,0,2 * Math. PI); 
context.fillStyle = "rgba(255,0,0,0.6)"; 
context. fill(); 


context. beginPath(); 

context. arc(230, 200,50, 0,2 * Math. PI); 
context. fillStyle = "rgba(0,255,0,0.6)"; 
context. fill(); 


context. beginPath(); 
context.arc(200,140,50,0,2 * Math. PI); 
context.fillStyle - "rgba(0,0,255,0.6)"; 
context. fill(); 
</script> 
</body> 
</html> 


7.8.2 合成 操作 


在 绘制 多 个 图 形 时 ,会 遇 到 图 形 交 释 的 情况 。 大 多 数 情 况 下 ,我们 希望 新 绘制 的 图 形 覆 
盖 已 有 的 图 形 ,遮挡 相互 重 释 的 一 部 分 ,同时 对 于 已 有 的 图 形 , 未 遮挡 的 部 分 不 受 影响 。 这 
个 过 程 类 似 于 现实 中 在 画布 上 粘贴 图 案 ,Canvas 的 默认 情况 也 是 如 此 。 但 是 ,Canvas 同时 
也 支持 更 为 复杂 的 合成 方式 ,以 满足 更 加 具体 的 需求 。 

在 使 用 Canvas 绘制 时 ,可 以 通过 设置 globalCompositeOperation 属性 ,来 使 用 不 同 的 
合成 操作 。 默 认 情 况 下 的 属性 是 "source-over", 即 对 已 有 的 图 形 进 行 简 单 的 遮盖 。 除 此 之 
外 ,还 有 "source-atop"、"source-in"、"source-out"、"xor"、"copy" 等 供 选择 设置 。 接 下 来 , 通 
过 一 个 实例 对 合成 操作 进行 基本 讲解 ,该 实例 在 浏览 器 中 的 展示 效果 如 图 7. 33 所 示 。 

文件 名 : 合成 操作 . html 


<! DOCTYPE HTML > 
<html lang = "en — US"> 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
< canvas id = "myCanvas" width = "500" height = "300"></canvas > 
< script? 
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 


context. globalCompositeOperation = "destination - over"; 
context. fillStyle = " # FFEC8B"; 


context. fillRect(30, 20,50,50); // 先 绘制 的 图 形 
context. fillStyle = " # 8B0A50" ; 
context. fillRect(60,50,50,50) ; // 后 绘制 的 图 形 
</script> 
</body> 
</html> 
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7.33 合成 操作 


通过 改变 globalCompositeOperation 属性 ,重新 定义 了 新 绘制 图 形 与 后 绘制 图 形 的 交 
全 关系 ,上 述 实 例 则 是 将 图 形 合成 规则 变 为 新 图 形 绘 制 到 旧 图 形 的 下 方 。 读 者 注释 掉 这 行 
代码 重新 运行 就 会 更 明显 地 发 现 其 与 默认 合成 方式 的 区 别 。 除 此 之 外 ,Canvas 画布 还 支持 
其 他 的 合成 方式 ,如 图 7. 34 一 图 7. 44 所 示 即 为 不 同 合成 方式 的 效果 图 ,其 具体 含义 与 使 用 
请 读者 自行 搜索 网 络 资料 进行 学 习 。 


图 7.34 source-in 7.35 source-over 图 7.36 source-out 
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7.37 source-atop 7.38 destination-over 图 7.39  destination-in 
7.40 destination-out 图 7.41 destination-atop 图 7.42 lighter 
图 7.43 copy 7.44 xor 
7.8.3 RÉ 


接 下 来 认识 一 种 合成 操作 的 特殊 情况 一 一 裁剪 (clip)。 这 个 方法 的 主要 作用 是 在 一 个 
已 有 的 图 形 或 图 像 上 ,通过 绘制 闭合 路 径 ,保留 路 径 内 部 的 内 容 并 将 其 余部 分 变 为 透明 。 这 
Hisp globalCompositeOperation 属性 设置 为 destination-in , 即 在 旧 图 形 的 基础 

绘制 图 形 , 并 只 显示 旧 图 形 与 新 图 形 重 全 的 旧 图 形 部 分 。 这 样 说 可 能 有 些 抽象 ,难以 理 
如 果 以 现实 世界 的 例子 来 解释 , 则 这 个 过 程 就 像 是 从 一 个 照片 上 裁剪 自己 想 要 的 部 分 ， 
裁剪 的 过 程 即 是 用 剪刀 在 照片 上 “绘制 路 径 ? 并 进行 裁剪 。 接 下 来 通过 一 个 简单 的 例子 以 及 

一 个 更 为 具体 的 实例 进行 讲解 。 
下 面 先 看 一 个 裁剪 过 程 的 简单 实例 ,其 在 浏览 器 中 的 展示 效果 如 图 7. 45 所 示 。 
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7.45 裁剪 简单 实例 


文件 名 : 裁剪 简单 实例 . html 


<!DOCTYPE HTML > 
<html lang = "en — US"> 
<head> 
< meta charset = "UTF - 8"> 
<title></title> 
</head> 
<body> 
< canvas id- "myCanvas" width = "500" height = "300"> </canvas > 
< script > 
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 


context. beginPath(); // 绘 制裁 剪 路 径 
context. moveTo(40, 40) ; 

context. lineTo(40,160) ; 

context. lineTo(250, 160) ; 


context. closePath(); // 闭 合 路 径 
context. stroke() ; 
context. clip(); // 裁 前 
context.fillStyle = "#FFD39B"; // 绘 制 一 个 浅 色 矩形 
context. fillRect(0,0, 400,400); 
</script> 
</body> 
</html> 


在 这 个 实例 中 ,首先 在 画布 上 绘制 一 个 所 要 裁剪 的 闭合 路 径 , 这 部 分 即 作为 画布 上 的 可 
见 部 分 。 然 后 ,在 画布 上 绘制 一 个 边 长 为 400px 的 浅 色 正 方形 。 通 过 观察 运行 效果 ,可 以 
看 出 上 述 裁 剪 过程 实际 上 是 在 浅 色 正方 形 的 基础 上 划 定 了 一 块 直角 三 角形 区 域 来 进行 选择 
性 显示 ,其 余 不 在 闭合 路 径 内 的 图 形变 为 透明 的 。 
裁剪 的 灵活 之 处 在 于 其 路 径 的 灵活 ,可 以 绘制 任何 想 要 保留 的 闭合 路 径 。 还 记得 前 一 
部 分 学 习 图 像 的 裁剪 与 绘制 时 那个 狗 狗 吗 ? 当时 ,我们 为 它 裁剪 出 一 个 * 证 件 照 ?。 在 下 一 
个 实例 中 我 们 将 为 它 制作 一 个 圆 形 大 头 贴 ,并 使 用 裁剪 这 一 方法 。 该 实例 在 浏览 器 中 的 展 
示 效 果 如 图 7. 46 所 示 。 
文件 名 : 裁剪 . html 
<!DOCTYPE HTML > 
< htnl lang = "en- US"> 
<head > 
< meta charset = "UTF — 8"> 
< title></title> 
</head> 
< body> 
< canvas id = "myCanvas" width = "500" height = "300"></canvas > 
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< script» 
var canvas = document.getElementById("myCanvas"); 


var context 7 canvas.getContext("2d"); 


context. beginPath(); 

context. arc(120,120,100, (Math. PI/180) * 0, (Math. PI/180) * 360, false); 
context. stroke(); 

context.clip(); 


var img = new Image(); // 声 明 一 个 Image 对 象 
img.onload = function(){ // 使 用 onload 事件 
context. drawImage( img, 0,0); 
}; 
img.src = "dog. jpg"; // 通 过 url 加 载 图 片 资源 
</script> 
</body> 
</html> 
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7.46 裁剪 大 头 贴 


在 这 一 实例 中 ,首先 使 用 前 一 部 分 所 学 的 绘制 弧 线 的 方法 绘制 一 个 圆 形 ,作为 所 要 裁剪 
的 区 域 ,然后 加 载 图 片 ,这 样 一 个 日 常生 活 中 常见 的 大 头 贴 就 做 好 了 。 这 里 值得 注意 的 是 ， 
在 使 用 裁剪 方法 时 ,应 该 先 确定 裁剪 路 线 , 然 后 再 绘制 图 形 或 图 像 ,否则 并 不 能 产生 相应 的 
效果 。 可 能 有 读者 会 尝试 将 大 头 贴 这 个 实例 中 的 绘制 路 径 裁剪 部 分 代码 放 到 图 片 加 载 代 码 
的 后 面 , 即 “ 先 画 图 后 裁剪 ”, 发 现 也 能 正常 显示 。 其 实 ,这 是 因为 onload 事件 的 存在 ,尽管 
看 上 去 先 完成 了 图 像 绘制 ,后 进行 裁剪 ; 实则 不 然 ,代码 中 onload 事件 在 页 面 图 片 资源 加 
载 后 执行 , 即 绘制 图 像 最 后 进行 。 就 像 之 前 介绍 图 像 绘制 时 所 说 ,图 像 的 加 载 不 同 于 图 形 的 
绘制 , 它 需要 从 硬盘 空间 获取 图 片 ,这 一 过 程 要 比 直接 通过 代码 绘制 要 慢 得 多 。 所 以 需要 使 


用 onload 事件 , 当 加 载 完 页 面 所 有 资源 后 再 进行 图 像 绘制 ; 否则 代码 将 迅速 逐 行 执行 , 执 
行 到 通过 变量 获取 图 片 时 ,图 片 并 没有 加 载 进 来 ,造成 图 片 绘制 失败 。 


7.9 坐标 变换 


坐标 变换 是 Canvas 动画 中 最 为 常用 的 技巧 之 一 ,其 主要 目的 是 将 绘图 工作 简单 化 , 例 
如 , 当 重 复 画 一 个 物体 时 ,物体 是 相同 的 ,但 位 置 会 不 一 样 。 这 时 ,如 果 没 有 类 似 坐标 变化 的 
平移 方法 ,只 能 通过 调用 相同 函数 时 改变 x y. 坐标 参数 来 实现 位 置 的 不 同 。 而 移动 坐标 系 
则 大 大 简化 了 我 们 的 工作 ,只 需 改 变 坐 标 系 位 置 就 可 以 实现 画布 上 某 一 物体 的 平移 .旋转 及 
缩放 , 免 去 了 对 物体 坐标 的 很 多 更 为 复杂 的 计算 。 坐 标的 具体 变换 方式 有 平移 
(translating) ,旋转 (rotating) 、 缩 放 (scaling) 以 及 变形 (transform)。 


7.9.1 平移 


首先 来 看 平移 变换 。 在 屏幕 二 维 空间 内 ,默认 初始 的 坐标 位 置 在 页 面 画布 标签 的 左上 
角 。 当 进行 坐标 的 平移 变换 时 ,相当 于 将 坐标 系 的 原点 进行 X 轴 方 向 和 Y 轴 方 向 的 平移 ， 
并 保持 原 X 轴 与 Y 轴 方 向 不 变 。 如 图 7.47 所 示 , 经 过 o y 
X 轴 正 方向 x 像素 的 平移 和 Y 轴 正 方向 y 像素 的 平移 ， | 
原 X-O-Y 坐标 系 移动 到 了 X -O'-Y' 坐标 系 。 ' 

相应 地 ,对 于 同一 个 函数 构造 出 来 的 图 像 ,尽管 传 | 
入 的 参数 没有 变 , 但 由 于 坐标 系 的 改变 ,图 像 发 生 了 相 |! š 


Q 
ts 





对 移动 。 如 下 面 这 个 实例 ,使 用 传人 相同 参数 的 同一 方 

法 构造 了 三 个 矩形 ,经 过 坐标 变换 后 ,矩形 的 位 置 发 生 

了 改变 。 为 了 便于 观察 ,我 们 将 三 个 矩形 填充 不 同 的 颜 y y 

色 。 该 实例 在 浏览 器 中 的 展示 效果 如 图 7. 48 所 示 。 
文件 名 : 坐标 变换 之 translate. html 


<! DOCTYPE HTML > 
<html lang = "en- US" 
<head> 
< meta charset = "UTF — 8"> 
< title></title> 
</head> 
< body> 
< canvas id = "myCanvas" width = "500" height = "300"></canvas > 
< script» 
var canvas = document. getElementById("myCanvas" ); 
var context = canvas. getContext("2d"); 


context. fillRect(10, 10,50,50); // 第 一 个 矩形 ,填充 为 默认 黑色 
context. translate(50,50); 


context. fillStyle = "4 FFAEB9"; // 改 变 颜色 填充 
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context. fillRect(10,10,50,50); // 第 二 个 矩形 
context. translate(50,50); 


context. fillStyle = "i FOFOF0"; // 再 次 改变 颜色 填充 
context. fillRect(10,10, 50, 50); // 第 三 个 矩形 
</script> 
</body> 
</html> 











图 7.48 translate 坐标 变换 


这 个 实例 使 用 的 是 同一 个 填充 矩形 方法 且 传 人 了 相同 的 参数 fillRect(10,10,50,50)。 
在 坐标 (10,10) 的 地 方 填充 一 个 长 为 50px、 宽 为 50px 的 矩形 。 之 后 调用 translate() 方 法 ， 
进行 平移 ,其 传人 的 坐标 很 好 理解 , 即 相 对 于 现 坐 标 方向 下 的 X 轴 正 方向 与 Y 轴 正 方向 的 
平移 距离 ,实例 中 translate(50,50) 表 示 坐 标 系 向 X 轴 正 方向 平移 50px, 向 Y 轴 正 方向 平 
移 50px。 之 所 以 强调 相对 于 现 坐 标 方向 ,是 因为 7.9. 2 节 要 介绍 的 旋转 变换 可 能 会 改变 X 
轴 正 方向 与 Y 轴 正 方向 。 


7.9.2 旋转 


旋转 (Crotate) 是 另 一 种 坐标 变换 ,不 同 于 平 
移 变 换 固定 X 轴 和 YY 轴 正 方向 进行 平移 ,旋转 
变换 固定 屏幕 二 维 坐 标 空间 的 原点 ,将 X 轴 和 Y 
轴 沿 顺 时 针 方向 旋转 一 定 的 角度 。 如 图 7.49 所 
示 , 原 坐标 系 XOY 以 原点 为 轴 , 向 顺 时 针 方向 
旋转 a 度 角 , 成 为 新 坐标 系 X-O-Y ,新 的 绘制 
函数 的 参考 坐标 系 则 变 为 旋转 之 后 的 坐标 系 。 

在 下 面 的 实例 中 ,先后 在 原 坐标 系 和 旋转 变 
换 之 后 的 坐标 系 上 填充 一 个 矩形 ,为 了 便于 观察 





Y 


图 7.49 rotate 坐标 系 变化 


其 不 同 之 处 ,采用 了 不 同 的 填充 颜色 ,该 实例 在 浏览 器 中 的 展示 效果 如 图 7. 50 所 示 。 
— wawan GREG 
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7.50 rotate 坐标 变换 


文件 名 : 坐标 变换 之 rotate. html 


<! DOCTYPE HTML > 
<html lang = "en - US"> 
<head> 
< meta charset = "UTF - 8"> 
<title></title> 
</head> 
<body> 
< canvas id- "myCanvas" width = "500" height = "300"></canvas > 
< script> 
var canvas = document. getElementById("myCanvas" ); 
var context = canvas.getContext("2d"); 


context. fillStyle = "i FOFOFO"; // 设 置 未 变换 坐标 前 填充 颜色 
context. fillRect(150,50,100,100); // 填 充 第 一 个 矩形 
context. rotate(1/5 * Math. PI); // 进 行 坐标 旋转 变换 
context. fillStyle = "4 FFAEBO"; // 设 置 改变 坐标 后 的 填充 颜色 
context. fillRect(150, 50,100, 100); // 填 充 新 的 矩形 
</script> 
</body> 
</html> 


在 该 实例 中 ,先后 使 用 同一 个 方法 传人 相同 的 参数 ,绘制 了 两 个 位 置 不 同 的 矩形 。 通 过 
rotate() 方 法 实现 了 坐标 系 的 旋转 ,rotate() 方 法 所 需要 传人 的 参数 即 是 顺 时 针 旋 转 的 角 
度 ,采用 弧度 单位 制 , 在 该 实例 中 ,传人 的 参数 是 1/5 * Math. PI, 即 将 坐标 系 以 原点 为 轴 顺 
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时 针 旋 转 1/5x 角度 。 
掌握 了 坐标 系 的 旋转 变换 后 ,绘制 旋转 图 形 就 变 得 更 加 容易 了 。 下 面 利用 旋转 变换 绘 
制 一 个 小 风车 ,体会 一 下 旋转 变换 的 便利 性 。 该 实例 在 浏览 器 中 的 展示 效果 如 图 7. 51 


所 示 。 














7.51 小 风车 


文件 名 : 小 风车 . html 


<! DOCTYPE HTML > 
<html lang = "en - US"> 
<head> 
< meta charset = "UTF - 8"> 
<title></title> 
</head> 
<body> 
< canvas id = "myCanvas" width = "500" height = "300"></canvas > 
«script» 
var canvas = document.getElementById("myCanvas") ; 
var context = canvas.getContext("2d"); 


var color = new Array(" # CIFFC1"," # 8DB6CD" , " # FF6A6A" , " #8470FF"); 
// 保 存 四 个 要 填充 的 颜色 


context. translate(150, 100); // 通 过 平移 变换 ,将 坐标 系 平移 
// 至 靠近 中 央 的 位 置 
for (var i= 0;i«5;i**)( 
context. beginPath(); 
context.fillStyle = color[i]; 
context. rotate( i x Math. PI/2) ; // 旋 转 坐 标 系 
context. noveTo(0, 0) ; // 开 始 绘制 风车 扇 叶 


context.lineTo(0, — 80); 
context. lineTo(30, - 25); 


context. closePath(); // 结 束 一 个 扇 叶 绘 制 
context. fill(); // 填 充 
) 
«/script» 
</body> 
</html> 


这 个 实例 便 是 坐标 变换 的 简单 应 用 。 它 利用 平移 变换 移动 了 坐标 原点 ,并 以 新 的 坐标 
系 为 基准 在 画布 上 绘制 “ 扇 叶 ”图 像 ,之 后 再 使 用 坐标 的 旋转 变换 实现 同一 绘制 逻辑 的 重复 
绘制 。 在 代码 中 ,我 们 使 用 for 循环 让 绘制 风车 扇 叶 的 代码 执行 四 次 ,每 次 将 坐标 系 旋转 
90"( 即 1/2:0 ,然后 绘制 扇 叶 路 径 并 填充 。 简 单 的 坐标 变换 让 我 们 省 去 了 计算 每 个 扇 叶 路 
径 相关 坐标 的 步骤 ,轻易 地 绘制 出 风车 的 图 案 。 


7.9.3 缩放 


缩放 (scale) 变 换 的 效果 是 将 坐标 系 的 尺度 伸 长 或 缩小 ,对 画布 上 的 图 像 而 言 ,坐标 系 
的 缩放 会 使 图 像 的 长 宽 发 生 相 应 的 缩小 或 放大 变化 .有 时 也 会 产生 变形 ,甚至 是 相反 方向 的 
变化 。 如 图 7.52 所 示 。 

在 图 7.52 中 ,我 们 按照 一 定 比例 将 坐标 系 X-O-Y 进行 缩小 , 变 成 了 X-O-Y' 坐 标 系 , 相 
应 地 在 原 坐 标 系 下 表现 出 来 的 长 度 和 宽度 会 按照 该 比例 变 小 。 当 缩放 操作 的 比例 变 为 负数 
时 ,缩放 ?操作 会 向 反方 向 展开 。 例 如 图 7. 53 .我们 保持 X 轴 方 向 上 缩放 比例 为 1 即 不 变 
化 ,Y 轴 上 缩放 比例 为 一 1 就 会 使 Y 轴 改 变 方 向 。 


Q X x 
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图 7.52 scale 坐标 系 变化 7.53 ”坐标 系 反方 向 变化 


下 面 通过 实例 来 体会 坐标 的 缩放 变换 ,该 实例 在 浏览 器 中 的 展示 效果 如 图 7. 54 所 示 。 
文件 名 : 坐标 变换 之 scale. html 


<! DOCTYPE HTML > 
<html lang = "en- US" 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 
</head> 
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<body> 
< canvas id= "myCanvas" width = "500" height = "300"»«/canvas > 
«script» 
var canvas = document. getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 


context. strokeRect(0, 0,50,50) ; // 绘 制 第 一 个 矩形 
context. scale(2,2); // 横 纵 坐 标 扩大 为 原来 的 2 倍 
context. strokeRect(0, 0,50,50) ; // 使 用 同样 的 函数 绘制 第 二 个 矩形 
</script> 
</body> 
</html> 











图 7.54 scale 坐标 变换 


在 上 述 实 例 中 ,我 们 先后 两 次 调用 相同 的 strokeRect() 函 数 ,传人 相同 的 参数 来 绘制 矩 
形 框 。 所 不 同 的 是 ,在 第 二 次 调用 函数 之 前 ,已 经 进行 了 坐标 的 缩放 变换 ,将 原画 布 上 的 尺 
FAKT 2 倍 , 绘 制 出 效果 图 中 的 外 框 。 这 里 值得 注意 的 是 , 随 着 坐标 的 缩放 ,矩形 框 的 粗 
细 也 会 随 之 发 生变 化 。 通 过 scale() 方 法 进行 坐标 系 的 缩放 变换 ,其 中 所 需 的 参数 分 别 为 ， 
原 X 轴 方 向 和 原 Y 轴 方 向 所 要 缩放 的 比例 , 即 新 的 坐标 系 长 度 与 原 坐标 系 长 度 之 比 , 当 该 
比例 小 于 1 并 大 于 0 时 ,坐标 系 长 度 缩小 ; 当 该 比例 大 于 1 时 ,坐标 系 长 度 放大 ; 当 该 比例 
小 于 0 时 ,坐标 系 开始 反 向 进行 缩小 和 放大 。 在 上 面 的 这 个 实例 中 ,我 们 向 scale() 方 法 中 
传人 了 两 个 相同 的 参数 ,相同 的 绘制 函数 在 新 的 画布 坐标 系 下 仅 发 生 了 大 小 的 变化 。 当 
scale() 传 人 的 两 个 参数 不 相同 时 .相同 的 绘制 函数 可 能 会 绘制 出 变形 图 案 。 请 参考 下 面 的 
绘制 椭圆 的 实例 ,为 了 便于 比较 ,我 们 在 同一 位 置 还 绘制 了 一 个 圆 , 该 实例 在 浏览 器 中 的 展 
示 效 果 如 图 7.55 所 示 。 

文件 名 : 绘制 椭圆 . html 


<! DOCTYPE HTML > 
< html lang = "en- US" 
<head> 
< meta charset = "UTF - 8"> 
<title></title> 
</head> 
<body> 
«canvas id = "myCanvas" width = "500" height = "300"»«/canvas > 
< script > 
var canvas = document. getElementById("myCanvas" ); 
var context = canvas. getContext("2d"); 


context. translate(150,100); 
context.arc(0, 0, 70, 0, Math. PI * 2, true); 
context. scale(1,0.5); // 将 了 轴 方 向 的 长 度 缩小 为 原来 的 1/2 
context.arc(0, 0, 70, 0, Math. PI * 2, true); 
context. stroke() ; 
</script> 
</body> 
</html> 
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7.55 椭圆 绘制 


在 这 个 实例 中 ,首先 进行 了 坐标 的 平移 变换 ,将 坐标 原点 移 至 中 央 位 置 ,然后 以 坐标 原 
点 为 圆心 绘制 圆 形 ,再 进行 缩放 。 调 用 scale() 方 法 并 分 别传 入 1 和 0. 5, 这 样 我 们 就 保持 
X 轴 方向 尺度 不 变 ,Y 轴 方 向 的 长 度 缩小 为 原来 的 1/2。 在 坐标 变换 前 后 ,所 调用 的 相同 贺 
形 绘制 方法 便 先后 绘制 出 圆 与 椭圆 。 


7.9.4 变形 第 
其 实 , 坐 标 系 的 平移 、 旋 转 和 缩放 已 经 全 部 概括 了 坐标 系 可 以 进行 的 变换 。 接 下 来 要 讨 
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论 的 变形 变换 则 是 上 述 三 种 方法 的 统一 ,我 们 可 以 用 一 个 方法 来 代表 所 有 涉及 的 变换 方式 。 
接 下 来 的 内 容 涉 及 一 些 简 单 的 数学 概念 ,请 读者 认真 体会 。 

要 理解 本 节 内 容 , 需 换个 角度 理解 坐标 变换 。 之 前 的 几 节 都 是 通过 直观 的 图 像 将 坐标 
变换 的 最 后 效果 展示 出 来 。 从 效果 上 来 看 ,坐标 变换 就 是 换 了 一 个 参考 系 。 而 实际 上 背后 
经 过 的 过 程 则 是 对 于 画布 上 每 一 个 点 的 重新 计算 。 即 将 画布 上 的 任意 一 点 假定 为 PX, 
YO ,经 过 坐标 变换 后 ,映射 到 P'(X’,Y’)。 其 中 映射 方式 为 X' = fX), Y = f(Y)。 换 个 
角度 也 可 以 理解 为 ,原来 的 坐标 系 并 未 改变 ,只 不 过 对 每 个 点 进行 了 一 个 运算 ,最 后 效果 好 
像 发 生 了 坐标 系 的 平移 、 旋 转 和 缩放 。 

在 理解 了 画布 上 任意 一 点 经 历 的 过 程 后 ,可 以 来 看 看 变形 变换 的 函数 。 变 形 函数 有 两 
种 ,分 别 是 setTransform() 和 transform()。 前 者 每 次 调用 参考 系 为 初始 坐标 参考 系 , 即 默 
认 的 屏幕 二 维 坐标 空间 。 后 者 则 是 以 之 前 变换 形成 的 坐标 系 为 参考 坐标 , 即 在 上 一 次 变换 
的 基础 上 进行 变换 。 接 下 来 以 setTransform( ) 为 例 , 详 细 介绍 变形 方法 中 的 参数 。 




















setTransform(a, b, c, d, e, f) 
该 方法 一 共有 六 个 参数 ,这 六 个 参数 共同 构成 了 变形 矩阵 , 即 
a c e 
bd f 
0.0 1 
Hx 4° 2EJE AB BE ole JE $T 158. A bs # 8r Ae dg RARE X = f(X),Y = f(Y)。 
x' G € € X 
b = f d f f 
1 0 0 1 1 
转化 为 方程 组 即 为 
X' 一 aX 十 cY 十 e 
= bX +dY+ f 
1 一 0。X 十 0。Y 十 1 
整理 一 下 就 是 





» — aX +Y +e 


Y =bX+dY +f 
这 一 方程 组 即 为 旧 坐标 系 到 新 坐标 系 的 计算 方式 。 由 此 可 以 很 直接 地 定义 平移 与 缩放 两 种 
变换 方式 。 
平移 : setTransform(1, 0. 0, 1, e. P) HP e Mf OIE X MWS Y 轴 方 向 的 平移 
长 度 。 


X 一 X 十 e 
be =Y+f 
缩放 : setTransform(a. 0. 0. d, 0. 0) ,其 中 a 和 4 分 别 为 坐标 系 在 X #H 5j Y 轴 方 向 
上 的 缩放 大 小 ,等 价 于 scale(a, d), 


KA == ak 
m = dY 
至 于 旋转 变换 , 则 需要 一 些 三 角 函 数 知识 来 推导 。 参 考 图 7.56 进行 理解 ,其 中 P 点 为 
原 坐 标 系 上 一 点 ,P' 为 新 坐标 系 上 一 点 。P 与 P' 距 离 原点 O 均 为 ,OP 与 原 X 轴 成 9 角 大 


小 ,OP 到 OP' 旋 转角 度 为 a。 


由 图 7.56 可 知 ,对 于 P'(X’,Y’), 有 
X' = r° cos(a + 0) 


b = r * sin(a + 0) 


* cosB— sina * 


sinf 和 sin Ca +£) = sina * cos? + 


根据 三 角 函 数 公式 cos Ca + D) = cosa 
X=r ° cosÜ 

。 化 简 上 式 得 
Y=r ° sinf 
! = X * cosa — Y * sina 





> 


cosa * song, 并 且 | 


| ‘= X * sina + Y * cosa 
对 应 到 矩阵 中 即 为 





sina cosa 0 





cosa — sina j 





0 0 1 
将 坐标 系 顺 时 针 旋 转 a 度 , 需 要 调用 函数 
图 7.56 变形 变换 rotate 


setTransform(cosa,sina, — sina,cosa) 


下 面 通过 具体 例子 来 体会 变形 坐标 变换 的 使 用 ,其 在 浏览 器 中 的 展示 效果 如 图 7. 57 所 
示 。 变 形 坐 标 变换 方法 也 可 以 理解 为 坐标 系 的 平移 、 旋 转 和 缩放 的 集成 方法 。 可 以 通过 传 


人 一 组 参数 ,同时 实现 其 中 的 所 有 坐标 变换 方式 。 
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7.57 变形 变换 
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文件 名 : 坐标 变换 之 transform. html 


<! DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
< canvas id= "myCanvas" width = "500" height = "300"></canvas > 
«script» 
var canvas 7 document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 


context. strokeRect(0, 0, 50,50) ; // 绘 制 第 一 个 矩形 
context. setTransforn(2,0,0,2,50,50) ; // 设 置 变形 矩阵 
context. strokeRect(0, 0, 50,50) ; // 使 用 同样 的 函数 绘制 第 二 个 矩形 
</script> 
</body> 
«/html» 


与 之 前 的 实例 相似 ,在 不 同 的 坐标 系 下 ,调用 相同 的 绘制 函数 。 不 同 的 是 这 里 使 用 了 一 
个 setTransform() 方 法 ,传人 一 组 参数 实现 了 向 X 轴 与 Y 轴 正 方向 50px 的 平移 ,以 及 X 
it; Y 轴 正 方向 上 2 倍 的 放大 。 相 比 于 单独 使 用 translateO 与 scale() ,setTransform() 能 
够 一 次 性 完成 复杂 的 坐标 变换 。 类 似 地 ,我 们 来 看 下 一 个 进行 加 入 旋转 的 坐标 变换 实例 ,其 
在 浏览 器 中 的 展示 效果 如 图 7. 58 所 示 。 
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7.58 带 有 旋转 的 变形 操作 


文件 名 : 带 有 旋转 的 变形 操作 . html 


<! DOCTYPE HTML > 
<html lang = "en- US"> 
< head> 
< meta charset = "UTF - 8"> 
«title»«/title» 
</head> 
< body> 
< canvas id = "myCanvas" width = "500" height = "300"></canvas > 
< script» 
var canvas = document. getElementById("myCanvas" ); 
var context = canvas.getContext("2d"); 


context. translate(50,50); 


context. strokeRect(0, 0, 50,50); // 绘 制 第 一 个 矩形 
context. setTransform(2 * (Math. sqrt(3)/2),1/2, - 1/2,2 * (Math. sqrt(3)/2),100,100); 
context. strokeRect(0,0, 50,50) ; // 使 用 同样 的 函数 绘制 第 二 个 矩形 
</script> 
</body> 
</html> 


在 上 面 的 这 段 代码 中 ,为 了 展示 效果 ,首先 进行 了 一 次 坐标 平移 变换 ,将 绘制 的 图 形 呈 
现在 中 央 。 看 上 去 setTransform() 内 传人 的 参数 有 些 复杂 ,但 可 以 分 别 来 理解 。 先 看 函数 
中 的 最 后 两 个 参数 ,根据 之 前 对 矩阵 操作 方程 组 的 理解 ,最 后 两 个 参数 独立 地 发 生 作用 ,使 
坐标 系 发 生平 移 ,与 translate() 传 人 的 两 个 参数 含义 相同 。 然 后 我 们 来 关注 其 他 参数 ,该 实 
例 在 坐标 平移 的 基础 上 还 进行 了 旋转 与 缩放 变换 。 在 实例 中 ,我 们 将 坐标 轴 向 顺 时 针 方 向 


上 旋转 了 30"( 即 x/6)。 根 据 之 前 的 推导 ,旋转 30 需要 前 四 个 参数 相应 地 为 { cos sin T 


一 sin $ «cos $) EXC BET P OUO 88 — 5 58 4-2 3ORD £ 3 2, 又 在 此 基础 上 


将 X 轴 和 YY 轴 在 正方 向 上 扩大 了 2 倍 ,最 后 完成 了 这 个 变换 。 可 能 有 些 读者 不 明白 为 什么 
变形 函数 中 分 别 向 X 轴 与 Y 轴 正 方向 平移 了 100px 后 依然 能 够 与 进行 了 坐标 系 平移 过 后 
且 绘 制 的 边 长 为 50px 的 正方 形 相 接触 。 这 是 因为 我 们 调用 的 是 set Transform O Jr 1& , c 
计算 的 原 坐 标 系 并 不 是 进行 平移 之 后 的 坐标 系 , 而 是 初始 的 屏幕 二 维 坐标 系 。 读 者 可 以 试 
着 将 setTransform() 方 法 改 为 transform() 方 法 并 传人 相同 的 参数 ,这 时 会 发 现 新 绘制 的 矩 
形 与 原来 的 矩形 分 开 了 。 


7.10 画布 当前 状态 的 保存 与 恢复 


当 在 画布 上 进行 图 像 绘制 时 ,常常 要 不 断 地 改变 一 些 相关 属性 ,如 所 要 填充 的 颜色 、 线 
条 的 粗细 以 及 坐标 系 当前 状态 等 。 这 个 过 程 就 如 同 现实 中 作画 时 ,总 是 要 不 断 地 变换 画笔 、 
变换 颜色 ,不 同 于 现实 中 可 以 把 调 好 的 颜色 放 在 那里 ,等 需要 了 再 用 ,在 HTML 的 画布 
上 ,需要 使 用 save() 与 restore() 方 法 。save() 方 法 会 将 当前 画布 的 状态 保存 下 来 , 当 调 用 
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restore() 方 法 时 ,又 会 恢复 回来 。 当 然 ,在 应 用 的 开发 中 ,不 会 只 保存 = 
一 个 状态 ,很 多 时 候 会 保存 一 系列 状态 。 那 么 这 些 状态 又 是 如 何 存储 
与 恢复 的 呢 ? 

答案 就 是 利用 栈 这 一 数据 结构 .如 图 7. 59 所 示 。 每 次 调用 
save() 时 ,会 将 一 个 状态 人 栈 ,例如 先后 保存 状态 A,B,C 和 D, 这 些 ^ 











状态 会 依次 和 人 栈 , 栈 这 个 数据 结构 其 实 就 像 我 们 往 箱子 里 放 东 西 , 先 
放 进 去 的 存在 最 下 面 ,等 往 出 拿 时 ,就 需要 从 最 上 面 取 出 , 即 所 谓 的 
“后 进 先 出 ”。 所 以 ,在 存 人 这 些 状态 后 , 当 不 断 调用 restore() 方 法 时 ,就 会 以 D.C、.B 和 A 
的 顺序 恢复 。 

接 下 来 通过 一 个 实例 来 体会 save() 和 restore() 方 法 ,并 来 体会 其 背后 的 栈 的 工作 原 
理 ,该 实例 在 浏览 器 中 的 展示 效果 如 图 7. 60 所 示 。 


图 7.59 栈 原理 
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7.60 保存 与 恢复 颜色 
文件 名 : 保存 和 恢复 画布 状态 . html 


«! DOCTYPE HTML > 
< html lang = "en- US" 
<head> 
< meta charset = "UTF - 8"> 
<title></title> 
</head> 
<body> 
< canvas id = "myCanvas" width = "500" height = "300"></canvas > 
< script» 
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 
var color = new Array(" # AB82FF"," # CAFF70"," # 5CACEE"," # 030303"); 
// 将 四 个 不 同 颜色 存 和 人 数组 


for (var i-0;i«4;ie*)( //£or 循环 从 上 到 下 填充 四 个 颜色 不 同 的 矩形 
context.fillStyle = color[i]; 
context. fillRect(0, i * 50,50,50); 


context. save() ; // 每 次 循环 , 保存 当前 状态 存储 当前 填充 颜色 
) 
for (var i-0;i«4;i**)[ // 再 以 此 恢复 状态 ,用 相似 地 方式 填充 矩形 


context. restore() ; 
context. fillRect(60,i * 50,50,50); 
) 
«/script» 
</body> 
</html> 
在 这 个 实例 中 , 先 将 四 个 颜色 保存 在 一 个 数组 里 ,然后 写 两 个 for 循环 : 第 一 个 for 循 
环 从 上 向 下 用 四 种 不 同 的 颜色 填充 四 个 矩形 ,并 保存 每 次 的 画布 状态 ; 第 二 个 for 循环 ,每 
次 先 恢复 画布 状态 , 即 让 栈 顶 保存 的 画布 状态 出 栈 , 然 后 用 所 恢复 的 画布 状态 内 的 填充 颜色 
从 上 到 下 填充 四 个 矩形 。 可 以 发 现 ,虽然 两 次 for 循环 都 用 了 相同 的 方法 填充 矩形 ,但 所 填 
充 的 颜色 次 序 相 反 。 这 就 是 栈 这 个 数据 结构 的 工作 原理 一 一 后 进 先 出 , 即 后 保存 的 状态 会 
先 恢复 出 来 。 
有 些 读 者 可 能 对 画布 状态 有 些 疑 惑 , 每 次 调用 save() 方 法 时 ,我 们 都 保存 了 画布 的 哪 
些 信息 ?画布 当前 状态 的 信息 ,包括 当前 填充 颜色 线条 宽度 等 ,简单 来 说 ,是 大 部 分 没有 通 
过 方法 直接 改变 的 二 维 绘图 上 下 文 , 即 context 相关 属性 都 是 画布 当前 状态 的 一 部 分 。 当 
然 其 中 的 例外 有 画布 坐标 状态 ,我 们 是 通过 调用 一 些 方法 来 进行 改变 的 。 接 下 来 通过 一 个 
例子 来 体会 坐标 系 的 保存 ,该 实例 在 浏览 器 中 的 展示 效果 如 图 7. 61 所 示 。 
lla 
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7.61 旋转 45 度 之 乖巧 
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文件 名 : 坐标 系 状态 保存 . html 


<! DOCTYPE HTML > 
<html lang = "en — US"> 
<head> 
«meta charset = "UTF - 8"> 
«title»«/title» 
</head> 
< body> 
< canvas id = "myCanvas" width = "500" height = "300"></canvas > 
< script> 
var canvas = document.getElementById("myCanvas"); 
var context 7 canvas.getContext("2d"); 


context. save() ; 


var img = new Inage() ; 
img.src = "乖巧 . jpg"; // 图 片 资 源 请 读者 自选 
img. onload = function(){ 
context. translate(120,0); 
context. rotate(Math. PI/4) ; 
context. drawImage( ing, 0,0); 
context. restore(); 
context. font = "Bold 30px Arial"; 
context.textAlign - "left"; 
context. fillStyle = " # 030303"; 
context.fillText(" 旋 转 45 BE 31675", 20,250); 
}; 
</script> 
</body> 
</html> 


在 这 个 实例 中 ,制作 了 一 个 简易 的 表情 一 一 旋转 45 EE”, [6 $90 09 ik aka 2 
前 介绍 的 坐标 系 的 旋转 与 绘制 文字 。 在 这 个 表情 中 ,将 图 片 进行 了 旋转 ,但 是 并 不 对 文字 进 
行 旋转 ,并 且 还 想 用 初始 的 屏幕 二 维 坐标 空间 来 定位 ,这 样 更 方便 。 这 时 就 用 到 了 save() 和 
restore() 方 法 。 在 绘制 之 前 保存 初始 默认 的 屏幕 二 维 坐标 空间 ,在 图 片 绘制 完成 后 ,恢复 原 
来 的 坐标 系 ,最 后 再 绘制 文字 。 可 能 有 些 读 者 注意 到 了 ,实例 中 将 很 多 代码 写 在 了 onload 
事件 里 ,请 读者 试 着 将 一 部 分 写 在 这 个 事件 的 外 部 ,比较 执行 效果 ,并 结合 之 前 所 学 内 容 , 思 
考 为 何 出 现 这 样 的 状况 。 


7.11 画布 的 保存 


7.10 节制 作 了 一 个 简单 .可爱 的 表情 。 有 些 读者 可 能 会 想 : 如 何 将 我 们 在 画布 上 绘制 
的 图 像 以 文件 的 形式 保存 到 本 地 以 作 进一步 的 使 用 ? 接 下 来 就 以 7. 10 节 介 绍 的 表情 为 例 ， 
介绍 如 何 保存 画布 内 容 。 

将 画布 保存 为 本 地 文件 ,最 简单 的 方式 就 是 运行 代码 后 直接 在 浏览 器 中 保存 。 如 图 7. 62 


所 示 FE BU TR FEES E M fI oe d ARK ERO" m s 然后 就 可 以 下 载 , 并 保存 到 
本 地 。 
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图 7.62 画布 的 直接 保存 


读者 可 能 会 发 现 保存 起 来 的 效果 同 想象 的 好 像 不 太一 样 。 在 图 片 查 看 软件 中 打开 之 
后 ,很 可 能 看 到 的 是 图 7. 63 所 示 的 样子 。 


“旋转 145 度 之 乖巧 


图 7.63 图 片 保 存 后 查看 效果 


表情 所 在 位 置 和 图 片 的 大 小 有 些 不 协调 ,还 有 周围 那些 奇怪 的 格子 又 是 些 什么 ? 首先 
保存 画布 时 ,之 所 以 会 出 现 图 7. 63 的 样子 ,是 因为 画布 本 身 的 大 小 局 限 。 在 HTML 代码 
中 ,在 定义 < canvas > 标签 时 ,同时 定义 了 画布 的 大 小 ,而 在 画布 的 保存 中 ,保存 的 是 完整 的 
画布 ,因此 就 保存 了 很 多 空白 区 域 。 若 希望 图 片 更 加 协调 ,只 需 在 标签 里 改变 画布 的 大 小 ， 
调整 width 和 height 的 属性 值 即 可 。 

至 于 在 图 片 查看 时 发 现 其 背景 有 格子 ,这 是 因为 在 画布 上 这 些 部 分 没有 被 绘制 , 呈 “ 透 
明 ” 状 态 。 在 绝 大 部 分 的 使 用 情况 下 是 看 不 出 来 这 种 效果 的 ,因为 大 部 分 应 用 背景 都 呈 白 
色 , 或 设置 透明 为 白色 。 改 变 画 布 大 小 后 ,在 实际 应 用 中 这 个 表情 应 该 如 图 7. 64 所 示 。 
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在 调节 画布 尺寸 大 小 时 ,可 以 在 < canvas > 标签 内 像 下 
面 这 段 代码 一 样 给 画布 添加 边框 ,这 样 就 可 以 直接 看 到 透明 
的 画布 的 大 小 ,同时 在 保存 图 片 时 ,所 添加 的 边框 又 不 是 画 
布 的 一 部 分 ,保存 在 本 地 的 图 片 也 没有 边框 效果 。 
«canvas id- "m vas" width = " " height=" " style= E 
yCam th = "270 ght = "270" sty: 5 度 之 乖巧 


"border:lpx dotted # d3d3d3;"»«/canvas» 


另 一 种 获取 画布 内 容 的 方式 是 使 用 数据 URL。 这 种 方 ” 图 7.64 表情 保存 最 终 效果 
法 将 画布 转换 为 图 像 文 件 , 然 后 将 图 像 数 据 转 换 为 字符 序列 并 编码 为 URL 形式 。 既 可 以 
用 这 种 方法 进行 当前 页 面 内 画布 内 容 的 获取 ,也 可 以 用 来 将 画布 内 容 保存 到 服务 器 上 。 与 
之 前 所 讲 的 像素 操作 类 似 , 出 于 安全 的 考虑 ,这 种 方法 需要 在 服务 器 环境 下 运行 。 

下 面 这 个 实例 在 < body > 标签 内 添加 一 个 < img > 标签 ,并 将 < img > 的 资源 设置 为 画布 
内 容 , 实 现 了 画布 的 数据 URL 的 获取 。 该 实例 在 浏览 器 中 的 展示 效果 如 图 7.65 所 示 。 
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7.65 数据 URL 获取 


文件 名 : 图 像 的 保存 . html 


«! DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
< canvas id= "myCanvas" width = "270" height = "270" style= "border:1px dotted #d3d3d3;"> 


«/canvas > 
< img id= "newImage" /> 
< script» 
var canvas = document.getFlementById("myCanvas"); 
var context = canvas.getContext("2d"); 


context. save() ; 


var img = new Inage() ; 
img. src = "325. jpg"; // 图 片 资源 请 读者 自选 
img.onload = function(){ 
context.translate(120,0); 
context. rotate(Math. PI/4); 
context. drawImage( img, 0,0); 
context. restore(); 
context.font - "Bold 30px Arial"; 
context.textAlign - "left"; 
context.fillStyle = " #030303"; 
context.fillText(" 旋 转 45 HE 2^ 31675", 20,250); 


var newImg = document.getElementById("newImage"); 
newImg. src = canvas. toDataURL(); 
}; 
</script > 
</body> 
</html> 


这 个 实例 借用 的 是 之 前 绘制 “旋转 45 度 之 乖巧 "的 代码 ,不 同 的 是 在 原来 代码 的 基础 
上 ,在 < body > 标签 内 又 添加 了 没有 指定 资源 的 < img > 标签 ,图 像 绘制 完成 后 ,使 用 一 个 变 
量 存储 新 添加 的 < img > 标签 对 象 ,并 改变 该 < img > 标签 的 src 属性 ,来 指定 一 个 图 片 资源 。 
等 号 右边 即 是 我 们 所 要 指定 的 图 片 资 源 ,这 里 没有 像 之 前 的 大 部 分 代码 一 样 调用 二 维 绘图 
EFX context 的 方法 ,而 是 调用 < canvas > 对 象 的 方法 toDataURL() 来 获取 画布 的 数据 
URL( 即 画布 内 容 )。 该 方法 也 可 以 传人 参数 , 当 没有 参数 传人 时 ,获取 的 将 是 一 个 PNG 格 
式 的 图 片 ,也 可 以 传人 相应 的 MIME 类 型 ,如 “image/jpeg” 等 来 获取 其 他 格式 的 图 片 。 当 
将 新 添加 的 < img > 标签 的 资源 指向 画布 的 数据 URL 时 ,可 以 看 到 这 个 < img > 标签 也 进行 
了 图 像 的 展示 ,就 同一 个 < img > 标签 直接 指定 一 个 图 片 资源 的 效果 一 样 。 类 似 地 ,利用 
toDataURL() 方 法 获取 图 像 的 数据 URL, 应 用 到 服务 器 端 便 能 够 完成 图 像 在 服务 器 端 
保存 。 


7.12. 3] 题 
1. 简 述 Canvas 的 默认 坐标 系统 。 
2. 怎样 调整 画布 大 小 才 不 会 对 画布 内 容 产生 变形 影响 ? 
3. 绘制 一 个 五 角 星 图 形 。 
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4. 简 述 在 画布 上 绘制 曲线 的 方法 ,画布 是 如 何 进行 曲线 绘制 的 。 
5. 绘制 奥运 五 环 ,包括 代表 五 大 洲 的 不 同 颜色 。 
6. 绘制 一 个 扇形 ,并 将 其 填充 为 任意 颜色 。 
7. 编写 一 个 绘制 圆 角 和 矩形 的 函数 ,并 且 可 以 被 复 用 。 
8. 利用 Canvas 实现 电子 时 钟 ,要 求 显示 当前 时 间 。 
9. 利用 Canvas 实现 圆 盘 时 钟 ,要 求 其 能 够 随时 间 变化 ,并 显示 当前 时 间 。 
0. 请 设计 制作 一 个 贝 塞 尔 曲线 绘制 的 可 视 化 应 用 ,要 求 能 够 自由 地 移动 控制 点 ,并 显 
示 曲 线 相应 的 参数 。 
1. 自行 制作 一 个 包含 图 片 和 文字 的 表情 图 片 。 
. 结合 7.5. 3 节 所 学 内 容 , 在 网 上 搜索 并 实现 复古 风格 滤 镜 效果 。 
. 简 述 Canvas 中 阴影 的 本 质 。 
.自行 搜索 木质 纹理 ,并 使 用 Canvas 的 填充 图 案 方式 实现 木质 纹理 的 重复 展示 。 
. 利用 裁剪 方法 ,为 自己 制作 一 个 个 性 化 的 大 头 贴 。 
. Canvas 中 一 共 提 供 几 种 坐标 变换 方式 ?这 些 变换 是 如 何 作用 的 ? 
. 简 述 Canvas 的 变形 坐标 变换 原理 。 
. 简 述 画布 状态 保存 和 恢复 的 过 程 。 为 什么 要 用 到 画布 的 保存 与 恢复 相关 方法 ? 
. 简 述 将 网 页 上 Canvas 画布 上 内 容 转换 为 图 片 文件 的 几 种 方法 。 
20. 结合 第 4 章 的 知识 ,在 页 面 上 添加 视频 控件 ,并 从 视频 内 抓 取 画面 来 作为 该 视频 的 
封面 (参考 4. 2.4 节 )。 
21. 结合 第 4 章 的 习题 和 前 面 的 第 20 题 ,制作 一 个 类 似 图 7. 66 这 样 的 播放 页 面 ,其 包 
含 一 个 视频 播放 控件 以 及 一 个 以 预览 图 方式 显示 可 播放 视频 的 播放 列表 。 
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Ed 7.66 视频 播放 页 面 示例 











22. 结合 第 4 章 的 知识 和 习题 ,制作 一 个 与 图 7. 67 相 类 似 的 音乐 播放 页 面 。 
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图 7.67 音乐 播放 器 示例 


23. 在 互联 网 查阅 相关 文档 ,并 结合 本 章节 Canvas 画布 的 知识 内 容 , 将 音频 资源 进 
行 类 似 图 7. 68 这 样 的 可 视 化 展示 , 即 制作 一 个 跟随 音乐 节奏 变化 的 频谱 图 动态 效果 
展示 。 
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Ed 7.68 音频 可 视 化 展示 

24. 结合 第 4 章 的 相关 知识 ,为 正在 播放 的 视频 增加 * 弹 幕 ?效果 , 即 视频 中 滚动 出 现 的 


评论 文字 ,如 图 7. 69 所 示 。 感 兴趣 的 读者 还 可 以 自 定义 * 弹 幕 ?发 出 的 位 置 .字体 ,大 小 和 颜 
色 等 。 
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第 8 章 Web Worker 工作 线程 





现代 计算 机 操作 系统 支持 多 进程 与 多 线程 ,大 大 提高 了 CPU 的 利用 率 , 同 时 也 大 大 提 
升 了 使 用 者 的 便利 。 让 使 用 者 可 以 一 边 听 着 音乐 ,一边 操作 文档 ,同时 还 有 程序 监听 此 时 是 
否 有 邮件 传人 等 。 操 作 系 统 所 支持 的 CPU 调度 (CPU scheduling) 让 多 个 进程 或 线程 共享 
CPU ,而 不 是 每 个 进程 或 线程 逐个 占领 CPU 直到 运行 结束 离开 ,如 果 那 样 ,我 们 就 不 能 同 
时 让 计算 机 做 很 多 事情 了 。 相 信 很 多 读者 都 遇 到 过 页 面 阻塞 的 情况 ,此 时 ,无 论 鼠 标 在 页 面 
上 怎么 点 或 是 怎么 按 都 没有 反应 ,这 就 是 因为 CPU 资源 被 其 他 进程 或 线程 占用 ,而 无 法 处 
理 UI 交 互 。 

为 了 让 用 户 在 使 用 浏览 器 访问 页 面 时 能 够 顺畅 地 运行 ,不 出 现 上 述 画面 阻 滞 的 情况 ， 
HTML5 提供 了 Web Worker 工作 线程 这 一 解决 方案 ,让 开发 者 能 够 实现 JavaScript 的 多 
线程 编程 ,将 一 些 较 耗 费 资源 的 计算 放 到 后 台 运 行 ,页 面 也 就 可 以 照常 显示 并 对 各 种 UI 交 
互 产生 响应 , 相 比 于 阻塞 等 待 ,这 样 的 用 户 体验 显然 更 好 。 


8.1 如 果 没 有 Web Worker 


在 正式 学 习 Web Worker 之 前 , 先 来 看 一 下 如 果 没 有 Web Worker, 页 面 会 是 怎样 的 。 
Web Worker 的 主要 用 途 是 将 一 些 费时 的 任务 作为 一 个 单独 的 线程 放 到 后 台 去 执行 ,而 页 
面 内 则 照常 运行 不 受 影响 。 等 到 在 另 一 个 线程 里 运行 的 费时 任务 结束 返回 结果 后 ,再 通过 
特定 的 方法 返还 给 页 面 。 

现在 构造 一 个 费时 的 任务 而 不 使 用 Web Worker, 来 模拟 现实 应 用 中 如 果 缺 少 多 线程 
机 制 将 要 面临 的 窘境 。 在 大 的 范围 内 寻找 素数 .递归 构造 斐 波 那 契 数 列 、 汉 诺 塔 等 都 可 以 是 
备 选 的 费时 任务 。 下 面 这 个 实例 将 把 在 大 范围 内 寻找 素数 作为 一 个 费时 的 任务 。 

文件 名 : 不 使 用 Web Worker. html 


<! DOCTYPE HTML > 
< htnl lang = "en- US"> 
<head > 
< neta charset = "UTF — 8"> 
<title > 不 使 用 Web Worker </title> 
<style> 
# searchResult{ 
height:300px; 
width:500px; 
overflow:scroll; 
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overflow - x: hidden; 
border:solid lpx black; 
margin- top:10px; 
) 
</style> 
</head> 
< body> 
<h2 > 素数 搜索 </h2 > 
<p> 搜 索 范 围 : < input type = "text" id= "fron" value = "0"/> 到 < input type = "text" id= 
"to" value = "1000000"/></p> 
< button onclick = "doSearch()"> 开 始 搜索 </button > 
< div id= "searchResult"> 
</div> 
< Script> 
function doSearch(fromNum, toNum)( 
// 获 取 输入 框 内 所 填写 的 范围 ,默认 从 1 到 100000 
var fromNum = document. getElementById("from").value; 
var toNum = document. getElementById("to"). value; 
var primes = findPrimes(fromNum, toNum); 
var primeList = ""; 
for (var i20; i< primes, length; i++) ( 
primeList += primes[i]; 
if (i != primes.length- 1) primeList += ", "; // 此 处 逗号 后 有 空格 
var displayList = document. getElementById(" searchResult"); 
displayList. innerHTML = primeList; 
) 
// 素 数 搜索 函数 ,返回 所 选 范围 素数 数组 
function findPrimes(fromNum, toNum)( 
var list = []; 
for (var i= fromNum; i« = toNum; i**)( 
if (i»1) list.push(i); 


) 
var maxDiv = Math. round(Math. sgqrt(toNum)); 
var primes = []; 


for (var i=0; i«list.length; i++) ( 
var failed - false; 
for (var j 72; j<= maxDiv; j++) ( 
if ((list[i] != j) && (list[i] % j == 0))( 
failed = true; 
) else if ((j== maxDiv) && (failed == false)) ( 
primes.push(list[i]); 


) 


return primes; 


</script> 
</body> 
</html> 


在 这 个 实例 中 ,有 两 个 输入 框 作 为 素数 搜索 范围 的 选择 ,由 于 是 示例 代码 ,并 没有 做 前 
后 大 小 的 检查 。 下 面 的 < div > 元 素 用 来 显示 输出 的 素数 列表 ,并 在 < style > 标签 内 对 其 设置 
了 样式 。 在 单 击 “开始 搜索 ”按钮 后 ,页 面 下 方 的 < div > 框 内 应 当 显 示 输 入 范围 内 的 素数 , 默 
认 填 写 的 范围 是 0 一 1 000 000。 但 是 , 当 单 击 该 按钮 后 ,页 面 实 际 上 是 图 8. 1 所 示 的 样子 。 
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8.1 不 使 用 Web Worker 


页 面 上 的 按钮 有 按 下 去 的 效果 ,但 是 仿佛 画面 定格 在 这 里 ,此 时 在 页 面 中 青 单 击 输 
入 框 没有 任何 反应 。 在 几 秒 之 后 ,按钮 才 被 弹 起 ,页 面 下 方 的 < div > 元 素 内 才 显 示 选 中 范 
围 的 素数 列表 ,如 图 8. 2 所 示 ; 然后 才 可 以 去 修改 输入 框 内 的 搜索 范围 ,并 进行 页 面 
交互 。 

之 所 以 这 样 ,是 因为 搜索 100 万 以 内 的 质数 是 一 个 十 分 耗费 时 间 的 工作 ,即便 今天 的 计 
算 机 CPU 处 理 速度 飞快 ,进行 这 样 的 计算 还 是 需要 耗费 几 秒 。 由 于 JavaScript 编程 语言 主 
要 用 来 应 对 Web 应 用 中 页 面 交 互 上 的 一 些 场景 , 它 本 身 并 不 支持 多 线程 ,是 单线 程 的 。 只 
有 一 个 线程 在 操作 页 面 中 的 DOM 元 素 。 所 以 ,在 上 面 这 个 实例 中 , 当 单 击 * 开 始 搜索 ”按钮 
后 ,浏览 器 JavaScript 引擎 中 仅 有 的 线程 被 用 来 做 搜索 100 万 以 内 素数 这 个 工作 ,也 就 没有 
其 他 工夫 去 管 页 面 上 的 输入 框 等 元 素 的 交互 ,因此 造成 了 页 面 的 阻塞 。 显 然 , 这 样 的 阻塞 对 
于 浏览 器 的 使 用 者 来 说 是 极其 不 好 的 体验 ,仿佛 页 面 死机 一 般 , 不 能 对 页 面 进行 其 他 的 操 
作 。 为 了 避免 这 样 的 情况 ,HTML5 为 开发 者 提供 了 Web Worker 的 解决 方案 。 
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2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 二 
[71, 73, 79, 83, 89, 97, 101, 103, 107, 109, 113, 127, 131, 137, H 


139, 149, 151, 157, 163, 167, 173, 179, 181, 191, 193, 197, 199, 
211, 223, 227, 229, 233, 239, 241, 251, 257, 263, 269, 271, 277, 
(281, 283, 293, 307, 311, 313, 317, 331, 337, 347, 349, 353, 359, 
367, 373, 379, 383, 389, 397, 401, 409, 419, 421, 431, 433, 439, 
1443, 449, 457, 461, 463, 467, 479, 487, 491, 499, 503, 509, 521, 
523, 541, 547, 557, 563, 569, 571, 577, 587, 593, 599, 601, 607, 
|613, 617, 619, 631, 641, 643, 647, 653, 659, 661, 673, 677, 683, 
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71, 977, 983, 991, 997, 1009, 1013, 1019, 1021, 1031, 1033, 
(1039, 1049, 1051, 1061, 1063, 1069, 1087, 1091, 1093, 1097, ~ 











8.2 经 过 一 段 时 间 页 面 阻 滞后 显示 出 结果 


8.2 Web Worker 的 创建 和 使 用 


为 了 解决 上 述 问题 ,Web Worker 定义 了 一 个 新 的 Worker 对 象 。 当 进行 一 些 需要 在 后 
台 运 行 的 程序 时 ,比如 加 载 一些 较 大 的 文件 或 处 理 一 个 比较 耗 时 的 计算 ,可 以 创建 一 个 
Worker 对 象 , 传 人 待 处 理 数 据 , 将 这 些 任 务 交 给 它 来 运行 ,而 不 是 在 仅 有 的 单线 程 前 端 运 
行 。 下 面 这 个 实例 就 创建 并 使 用 Web Worker 实现 8. 1 节 搜 索 素 数 的 计算 。 注 意 , Web 
Worker 需要 在 服务 器 环境 下 测试 运行 。 该 实例 在 浏览 器 中 的 运行 效果 如 图 8. 3 和 图 8. 4 
所 示 。 

文件 名 : 使 用 Web Worker. html 


<!DOCTYPE HTML > 
<html lang = "en- US"> 
< head» 
< neta charset = "UTF - 8"> 
<title>f JH Web Worker </title> 
<style> 
# searchResult{ 
height:300px; 
width:500px; 
overflow:scroll; 
overflow - x: hidden; 
border:solid 1px black; 
margin- top:10px; 
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Web Worker 正在 工作 ， 区 间 (0,1000000) 











8.3 ”使 用 Web Worker 




















Web Worker 正在 工作 ， 区 间 (0.1000000) ------ 
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211, 223, 227, 229, 233, 239, 241, 251, 257, 263, 269, 271, 277, 
281, 283, 293, 307, 311, 313, 317, 331, 337, 347, 349, 353, 359, 
367, 373, 379, 383, 389, 397, 401, 409, 419, 421, 431, 433, 439, 
1443, 449, 457, 461, 463, 467, 479, 487, 491, 499, 503, 509, 521, 
523, 541, 547, 557, 563, 569, 571, 577, 587, 593, 599, 601, 607, 
|613, 617, 619, 631, 641, 643, 647, 653, 659, 661, 673, 677, 683, 
(691, 701, 709, 719, 727, 733, 739, 743, 751, 757, 761, 769, 773, 
|787, 797, 809, 811, 821, 823, 827, 829, 839, 853, 857, 859, 863, 
77, 881, 883, 887, 907, 911, 919, 929, 937, 941, 947, 953, 967, 
71, 977, 983, 991, 997, 1009, 1013, 1019, 1021, 1031, 1033, 
061 1063 1060 109 Qo3 100 








图 8.4 使 用 Web Worker 后 输出 结果 


</style> 


</head> 
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<body> 

< h2 > 素数 搜索 </h2 > 

<p> 搜 索 范围 : < input type = "text" id= "from" value = "0"/> 到 < input type = "text" id= 
"to" value = "1000000"/></p> 

< button id = "searchBtn" onclick = "doSearch( ) "> 开始 搜 索 </button > 

< div id= "processing"> 

</div> 


< div id= "searchResult"> 
</div> 
< Script> 
var searchBtn = document.getElementById("searchBtn"); 
var statusDisplay = document.getElementById("processing"); 
var worker; 
function doSearch(fromNum, toNum)( 
// 在 开始 搜索 后 禁用 按钮 
searchBtn. disabled = true; 
// 创 建 Worker 对 象 ,并 为 Worker 对 象 的 onmessage 事件 指定 事件 处 理 函 数 
worker = new Worker("findPrines. js"); 
worker. onmessage = receivedWorkerMessage; 
// 获 取 输 入 框 内 所 填写 的 范围 ,默认 从 1 到 100000 
var fromNum = document. getElementById("from").value; 
var toNum = document. getElementById("to").value; 
// 通 过 Worker 对 象 的 postMessage( ) 方 法 ,向 Worker 传递 数据 
worker. postMessage( 
{ 
fromNum: fromNum, 
toNum:toNum 


); 
statusDisplay. innerHTML = "Web Worker 正在 工作 ,区 间 \(”+ fromNum + "," + 
toNum +"N) e "s 
) 
// 主 线程 onnessage 事件 所 指定 的 事件 处 理 函 数 ,将 传 回 的 素数 数组 显示 到 页 面 
function receivedWorkerMessage(event){ 
// 获 取 Worker 对 象 传 来 的 素数 数组 
var primes = event. data; 
var primeList = ""; 
// 将 素数 数据 变 为 有 分 隔 符 的 字符 串 
for(var i20; i«primes.length; i**)( 
primeList += primes[i]; 
if (i != primes. length- 1){ 


primeList += ", "; 


) 

// 将 结果 显示 在 页 面 指定 区 域 

var displayList = document. getElementById("searchResult"); 
displayList. innerHTML - primeList; 

// 启 用 button 


searchBtn.disabled - false; 
) 
</script> 
</body> 
</html> 


文件 名 : findPrimes. js 
//Worker 的 onmessage 事件 处 理 函 数 , 收 到 来 自主 线程 的 postMessage( ) 方 法 传 来 的 数据 


onmessage = function(event){ 
// 获 取 传 来 的 数据 
var fromNum = event. data. fromNum; 
var toNum = event. data. toNum; 
// 调 用 搜索 素数 的 函数 
var primes = findPrimes(fromNum, toNum); 
// 使 用 postMessage( ) 方 法 将 结果 回 传 给 主线 程 
postMessage(primes); 
J 
// 素 数 搜索 函数 ,返回 所 选 范围 素数 数组 
function findPrimes(fromNum,toNum){ 
var list = []; 
for (var i= fromNum; i« = toNum; i++){ 
if (i»1) list.push(i); 
) 
var maxDiv = Math. round(Math. sqrt(toNum)); 


var primes = []; 


for (var i=0; i< list. length; i++) { 
var failed = false; 
for (var j=2; j<= maxDiv; j++) ( 
if ((list[i] (= j) && (list[i] % j == 0)) { 
failed = true; 
} else if ((j== maxDiv) && (failed == false)) { 
primes. push(list[i]); 
) 
) 
) 
return primes; 

] 

在 服务 器 环境 下 运行 上 述 实例 后 ,可 以 观察 到 使 用 了 Web Worker, Hit; "JF iR IER” f 
钮 后 ,页 面 继续 对 用 户 操作 进行 响应 ,而 不 会 出 现 阻塞 。 费 时 的 素数 搜索 工作 被 放 到 后 台 运 
行 , 并 在 运行 结束 后 返回 结果 ,然后 再 输出 到 页 面 上 。 在 详细 分 析 代 码 之 前 , 先 了 解 一 下 在 
这 个 过 程 中 主要 发 生 了 什么 。 

网 页 与 Worker 对 象 分 属 不 同 的 线程 ,它们 通过 postMessage ( ) Jr ik 5 #& B BJ 
onmessage 事件 响应 来 进行 通信 。 网 页 主线 程 将 需要 处 理 的 数据 通过 所 创建 Worker 对 象 
的 postMessage() 方 法 传递 给 指定 的 Worker 对 象 实例 , 当 信息 发 送 过 去 之 后 ,就 触发 了 这 
个 Worker 实例 的 onmessage 响应 事件 , 即 收 到 了 信息 需要 处 理 。 此 时 ,作为 主线 程 的 网 页 
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5j Worker 同时 运行 ,网 页 继续 对 使 用 者 的 操作 进行 响应 ,而 Worker 实例 则 运行 着 这 个 比 
较 费 时 的 任务 。 当 任务 运行 完毕 后 ,得 到 了 计算 结果 ,支线 程 Worker 调用 postMessage() 传 人 
相应 的 结果 ,这 样 就 将 结果 传递 回 主页 面 。 这 时 ,页 面 的 onmessage 事件 被 触发 ,调用 相应 
的 事件 处 理 函 数 ,就 可 以 将 Worker 的 计算 结果 取出 来 , Web Worker 由 此 在 不 影响 主页 面 
的 情况 下 完成 了 任务 。 其 工作 过 程 如 图 8. 5 所 示 。 

主页 面 代码 Worker 对 象 代码 











postMessage 
一 一 一 > onmessage 事 件 


执行 计 
处 理 函 


postMessage 
onmessage 事 件 2 计算 结果 





Ru 






































图 8.5 Web Worker 与 主页 面 通信 过 程 
下 面 循 着 这 个 过 程 仔细 分 析 代 码 。 


function doSearch(fromNum, toNum)( 
// 在 开始 搜索 后 禁用 按钮 
searchBtn.disabled = true; 
// 创 建 Worker 对 象 ,并 为 Worker 对 象 的 onnessage 事件 指定 事件 处 理 函 数 
worker = new Worker("findPrimes. js"); 
worker.onmessage = receivedWorkerMessage; 
// 获 取 输 入 框 内 所 填写 的 范围 ,默认 的 从 1 到 100000 
var fromNum = document. getElementById("from").value; 
var toNum = document. getElementById("to").value; 
// 通 过 Worker 对 象 的 postMessage( ) 方 法 , 向 Worker 传递 数据 
worker. postMessage( 
{ 
fromNum: fromNum, 
toNum:toNum 
) 
); 
statusDisplay. innerHTML = "Web Worker 正在 工作 ,区 间 \(" + fromNum + "," + toNum +"\) 


当 输 入 指定 的 搜索 区 间 后 , 单 击 “ 开 始 搜索 "按钮 即 开始 一 次 素数 搜索 行为 。 单 击 该 按 
钮 后 触发 函数 doSearch()。 在 该 函数 内 , 先 将 按钮 禁用 ,一 次 搜索 完成 后 再 进行 下 一 次 搜 
索 ,否则 在 实际 中 会 出 现 不 一 致 的 现象 。 然 后 创建 一 个 Worker 对 象 ,并 传人 需要 Web 
Worker 执行 的 代码 文件 的 URL。 应 注意 ,Worker 对 象 所 运行 的 JavaScript 代码 需要 放置 
在 一 个 单独 的 文件 中 。 这 样 设计 的 目的 是 将 Web Worker 线程 与 页 面 分 离 , Worker 对 象 不 


能 访问 到 DOM 节点 、 全 局 变量 或 全 局 函数 等 ,防止 与 主页 面 出 现 冲突 。 然 后 指定 主页 面 的 
onmessage 事件 的 处 理 函 数 为 receivedWorkerMessage()。 之 后 读 取 在 页 面 输入 的 搜索 区 
间 数 值 ,再 通过 Worker 对 象 的 postMessage() 方 法 ,将 数据 传递 给 指定 的 Worker 实例 。 
最 后 具体 的 搜索 任务 就 交 给 新 创建 的 Worker 对 象 ,主页 面 继续 运行 并 对 用 户 的 操作 进行 
响应 。 

然后 来 看 一 下 这 个 Worker 对 象 实例 的 代码 ,在 主页 面 将 数据 发 送出 去 时 , 这 个 
Worker 对 象 实例 的 onmessage 事件 被 触发 。 


//Worker 的 onmessage 事件 处 理 函 数 , 收 到 来 自主 线程 的 postMessage( ) 方 法 传 来 的 数据 
onmessage = function(event){ 

// 获 取 传 来 的 数据 

Var fromNum = event. data. fromNum; 

Var toNum = event. data. toNum; 

// 调 用 搜索 素数 的 函数 

var primes = findPrines(fromNum, toNum); 

// 使 用 postMessage( ) 方 法 将 结果 回 传 给 主线 程 

postMessage( primes); 


) 


在 onmessage 事件 的 处 理 函 数 中 , 先 通过 传人 的 event 对 象 获 取 主 页 面 所 传递 的 数据 ， 
然后 将 其 作为 参数 传人 findPrimes O 函数 进行 运算 ,这 个 函数 与 之 前 的 findPrimes O PR 2t 
基本 一 致 。 在 得 到 计算 结果 后 ,再 通过 postMessage( ) 方 法 将 结果 回 传 给 主页 面 。 

Worker 对 象 实例 中 的 代码 运行 结束 后 ,就 会 将 数据 通过 postMessage() 方 法 传 回 主页 
面 。 下 面 就 回 到 了 主页 面 JavaScript 代码 所 指定 的 主页 面 onmessage 事件 处 理 函 数 


receivedWorkerMessage() 。 


// 主 线程 onnessage 事件 所 指定 的 事件 处 理 函 数 ,将 传 回 的 素数 数组 显示 到 页 面 
function receivedWorkerMessage(event){ 
// 获 取 Worker 对 象 传 来 的 素数 数组 
var primes = event.data; 
var primeList = ""; 
// 将 素数 数据 变 为 有 分 隔 符 的 字符 串 
for(vari-0; i< primes. length; i**)( 
primeList += primes[i]; 
if (i != primes. length- 1){ 
primeList += ", "; 
} 
) 
// 将 结果 显示 在 页 面 指定 区 域 
var displayList = document. getElementById("searchResult"); 
displayList. innerHTML = primeList; 
// 启 用 button 
searchBtn.disabled = false; 
) 


与 Worker 对 象 实例 中 获取 传人 数据 的 方法 类 似 , 通 过 传人 的 event 对 象 来 读 取 计 算 结 
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果 。 然 后 将 数组 形式 的 计算 结果 转换 为 有 分 隔 符 的 字符 串 ,并 将 其 显示 到 页 面 上 。 最 后 再 
启用 按钮 。 至 此 就 完成 了 一 次 Web Worker 的 简单 应 用 过 程 。 


8.3 错误 处 理 


Web Worker 与 页 面 主 线程 的 通信 ,除了 通过 postMessage() 和 onmessage 事件 机 制 
外 ,还 有 一 种 就 是 错误 处 理 。 当 Web Worker 的 代码 运行 出 现 错误 后 ,需要 通过 错误 处 
理 将 错误 信息 传 回 页 面 主 线程 。 此 时 通过 Worker 的 onerror 事件 来 对 Web Worker 运 
行 错误 做 出 反应 。 在 上 述 代 码 段 的 doSearch() 函 数 中 指定 onerror 事件 处 理 函 数 , 代 码 
如 下 。 


worker.onerror = workerError; 
为 Worker 对 象 实例 指定 workerError O HUEJ onerror 事件 处 理 函 数 。 


function workerError(error)( 
statusDisplay. innerHTML - error.message; 


) 


向 workerError CO Jy i V f£ A. event 对 象 , 这 里 用 error 命名 这 个 event 对 象 ,并 将 
HTML 页 面 中 的 状态 显示 内 容 变 为 event 对 象 的 message, 来 读 取 错误 信息 ,然后 反馈 到 主 
页 面 。 

由 于 错误 有 不 同情 况 ,所 以 无 法 一 一 列举 。 下 面 简单 测试 一 下 错误 处 理 。 由 于 Web 
Worker 不 同 于 主页 面 ,不 能 访问 页 面 中 的 DOM 元 素 , 也 不 能 调用 一 些 主 页 面 的 全 局 变量 
或 全 局 函数 ,如 果 强 行 调用 ,就 会 产生 错误 。 产 生 错 误会 触发 onerror 事件 并 执行 相应 的 处 
理 函 数 。 下 面 在 之 前 Worker 对 象 实例 中 做 如 下 修改 ,在 onmessage 事件 处 理 函 数 中 使 用 
Worker 对 象 所 不 能 使 用 的 alert 函数 。 





onmessage = function(event){ 
//Worker 不 能 调用 alert 这 样 的 全 局 函数 
alert("Hello World!"); 
// 获 取 传 来 的 数据 
Var fromNum = event. data. fromNum; 
var toNum = event. data. toNum; 
// 调 用 搜索 素数 的 函数 
var primes = findPrimes(fromNum, toNum); 
// f Fl postMessage( ) 方 法 将 结果 回 传 给 主线 程 
postMessage(primes); 


) 

然后 在 服务 器 环境 运行 主页 面 单 击 “ 开 始 搜索 ”按钮 ,显示 的 错误 信息 如 图 8. 6 所 示 。 

这 时 可 以 看 到 主页 面 中 “开始 搜索 ”按钮 下 方 的 错误 显示 ,由 于 Worker 对 象 实例 不 能 
调用 像 alert() 这 样 的 全 局 函数 ,所 以 会 传 回 错 误 信 息 . 触 发 主页 面 的 onerror 事件 ,并 显示 


"alert is not defined", 














到 























Uncaught ReferenceError alert is not defined 














8.6 错误 处 理 


8.4 终止 线程 


对 于 每 一 个 创建 的 Worker 对 象 实例 ,开发 者 都 可 以 通过 terminate() 或 close() 方 法 终 
止 这 个 线程 。 调 用 过 terminate() 方 法 后 ,就 不 能 再 使 用 这 个 实例 了 。 如 果 继 续 通过 这 个 实 
例 调用 Worker 对 象 的 方法 就 会 抛 出 错误 。 

在 HTML 页 面 中 新 添加 一 个 按钮 ,并 指定 单 击 事件 所 触发 的 函数 。 


< button id = "stopBtn" onclick = "cancelSearch()"> 终 止 搜索 </button > 
然后 在 < script > 标签 内 编写 cancelSearch() 方 法 。 


function cancelSearch()( 
worker. terminate(); 
statusDisplay. innerHTML = ""; 
if (searchBtn. disabled == true)( 


searchBtn. disabled = false; 
P EJ 
在 服务 器 环境 运行 后 ,就 可 以 通过 “终止 搜索 ”按钮 来 结束 本 次 正在 进行 中 的 查找 并 取 
消 “ 开 始 搜 索 ” 按 钮 的 禁用 。 章 
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8.5 共享 线程 


在 此 之 前 ,我 们 介绍 了 Worker 对 象 的 声明 与 应 用 。 具 体 来 说 ,之 前 的 Worker 对 象 指 
的 是 专用 线程 (Dedicated Web Worker) ,从 某 一 页 面 中 创建 并 与 之 通信 ,并 可 由 同一 个 页 面 
进行 线程 的 终止 。 接 下 来 要 学 习 的 共享 线程 (Shared Web Worker) ,与 之 前 不 同 , 它 可 由 多 
个 页 面 共同 使 用 ,而 不 专属 于 某 一 个 页 面 。 

下 面 通过 一 个 具体 的 实例 来 讲解 。 在 这 个 实例 中 ,涉及 两 个 HTML 文件 与 一 个 
JavaScript 文件 : 一 个 HTML 页 面 负责 向 共享 线程 传人 一 个 值 ,并 指定 共享 线程 内 的 变量 
代为 保存 ; 另 一 个 HTML 页 面 则 可 以 通过 单 击 获取 信息 按钮 ,从 同一 个 共享 线程 内 读 取 变 
量 并 显示 ; JavaScript 文件 即 为 共享 线程 的 代码 。 该 实例 在 浏览 器 中 的 展示 效果 如 图 8. 7 
和 图 8.8 所 示 。 


Q zz 
Q | Q localhost:8088/Web%20Worker/Demol.html 





[Hello Word! ^ | localhost:8088 显示 : 
消息 获取 成 功 ! 




















8.7 共享 线程 发 送信 息 
文件 名 : Demol. html 


<! DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF — 8"> 
<title > 共享 线程 1 «/title» 
</head> 
<body> 
< input type = "text" id= "txt" /> 
< button id= "setInfo" onclick = "setInfo()"» X iÉ«/button» 





C |O localhost:8088/Web9620Worker/Demo2 html mx. é om: 











Hello World! | localhost:8088 显示 : 
获取 














Hello World! 














8.8 共享 线程 获取 信息 


«script» 
var txt = document. getElementById("txt"); 
var worker = new SharedWorker("sharedWorker. js"); 
worker.port.onmessage = function(e)( 
alert(e.data); 
) 
function setInfo()( 
worker. port. postMessage(txt. value); 
) 
«/script» 
</body> 
</html> 


文件 名 : Demo2. html 


«! DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF - 8"> 
<title> 共 享 线程 2 </title> 
</head> 
< body» 
<div id= "info"> 消 息 文本 显示 </div> 
< button id = "getInfo" onclick = "getInfo()"> 获 取 </button > 
< script > 
var info = document. getElementById("info"); 





x 
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var worker = new SharedWorker("sharedWorker. js"); 
worker.port.onmessage = function(e)( 
info.innerHTML = e.data; 
alert(e.data); 
) 
function getInfo()( 
worker. port. postMessage( "getMessage" ) ; 
) 


</script> 
</body> 
</html> 
文件 名 : sharedWorker. js 


var data; 
onconnect - function(e)( 
var port 7 e.ports[0]; 
port.onmessage - function(e)( 
if (e.data == "getMessage")( 
port. postMessage(data) ; 
}else{ 
data = e.data; 
port. postMessage( "消息 获取 成 功 !"); 


} 


在 发 送信 息 的 页 面 内 输入 *Hello World!” 后 , 单 击 “ 发 送 " 按 钮 ,页 面向 所 创建 的 共享 线 
程 发 送信 息 ,并 收 到 线程 的 回复 。 然 后 在 获取 消息 页 面 , 单 击 “ 获 取 ” 按 钮 ,就 可 以 收 到 在 上 
一 个 页 面 所 发 送 的 信息 。 

在 详细 分 析 代 码 之 前 , 先 通 过 代码 大 致 观察 共享 线程 与 之 前 的 专用 线程 的 不 同 之 处 。 
主要 的 区 别 首先 是 创建 对 象 的 不 同 , Worker 对 象 为 专用 线程 ,SharedWorker 为 共享 线程 。 
然后 可 以 注意 到 共享 线程 对 象 实例 的 onmessage 事件 与 postMessage() 需 要 通过 其 port 
(端口 ) 来 实现 。 图 8.9 描述 了 上 述 实例 的 通信 过 程 。 

下 面 分 析 实 例 中 的 代码 ,与 之 前 的 专用 线程 原理 一 样 , 实 例 中 的 两 个 HTML 页 面 与 共 
享 线程 之 间 的 通信 依赖 消息 的 传递 与 接收 ,它们 三 个 就 像 邮 件 的 发 送 与 接收 过 程 一 样 ,需要 
postMessage() 方 法 将 消息 发 送出 去 ,然后 每 一 个 “信箱 ”又 需要 时 时 刻 刻 等 待 是 否 有 邮件 进 
来 ,如 果 有 则 需要 做 出 反应 ,触发 onmessage 事件 处 理 函数 。 

在 Demol. html 5j Demo2. html 中 ,通过 如 下 代码 对 共享 线程 进行 声明 与 创建 ,创建 的 
对 象 为 SharedWorker 对 象 。 


var worker = new SharedWorker("sharedWorker. js"); 


然后 需要 为 这 个 SharedWorker 对 象 指定 onmessage 事件 处 理 函 数 ,与 之 前 的 专用 线 
程 不 同 ,共享 线程 需要 通过 端口 来 指定 (worker. port. onmessage) 。 在 上 面 的 代码 中 ,直接 
对 onmessage 事件 指定 匿名 函数 来 执行 处 理 。 如 果 是 通过 函数 名 来 调用 , 则 需要 提前 开启 


GO 发 送 输入 的 消息 字符 串 








Demol.html 
. 获取 消息 字符 串 并 保存 
O 向 面 发 送 成 功 信息 © wma 
sharedWorker.js 
@ " ; PES © We "getMessage" , 
Demo2.html © 向 发 送信 息 


图 8.9 SharedWorker 通信 过 程 


port 端口 ,才能 进行 onmessage 事件 的 处 理 以 及 postMessage() 方 法 的 使 用 (worker. port. 
start()), 

在 Demol 中 ,通过 < input > 标签 输入 字符 串 ,并 在 < script > 标签 的 代码 段 中 获取 所 输 
入 的 信息 , 单 击 “ 发 送 ” 按 钮 后 执行 函数 setInfoO 。 


function setInfo( ){ 
worker. port. postMessage(txt. value); 
J 


同样 ,worker 通过 端口 执行 postMessage() 方 法 ,并 传人 所 获取 的 输入 框 字符 串 。 下 面 
来 看 sharedWorker. js 文件 。 


var data; 

onconnect = function(e)( 
var port = e.ports[0]; 
port.onmessage = function(e)( 


if (e.data == "getMessage")( 
port. postMessage(data) ; 
}else{ 


data = e.data; 
port. postMessage(" il B, Jk BU JI! ") ; 


Web Worker 工作 线程 
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首先 为 onconnect 事件 指定 事件 处 理 函数 ,并 获取 与 共享 线程 实例 通信 的 端口 信息 ,这 
样 共享 线程 实例 就 可 以 确定 自己 在 与 哪 一 个 页 面 进行 通信 ,并 向 相应 的 线程 发 送信 息 。 发 
送信 息 的 postMessage() 方 法 通过 相应 的 端口 信息 进行 调用 ,从 而 可 以 将 信息 传递 给 指定 
的 页 面 , 即 正在 与 其 进行 连接 并 通信 的 页 面 。 由 于 Demol 与 Demo? 功能 不 同 ,而 二 者 却 与 
同一 个 共享 线程 实例 进行 通信 ,所 以 在 代码 中 通过 条 件 语 句 来 区 别 , 当 传人 字符 串 为 
"getMessage" 时 ,postMessage() 方 法 传人 的 参数 才 是 之 前 所 保留 的 消息 字符 串 。Demo2 
页 面 基本 原理 与 Demol 类 似 , 故 不 再 袭 述 。 

上 述 实例 实现 了 一 个 简单 的 共享 线程 的 创建 与 使 用 ,从 而 让 两 个 不 同 的 页 面 能 够 对 同 
一 个 SharedWorker 对 象 实例 进行 通信 ,并 共享 其 方法 与 数据 。 可 以 看 到 ,SharedWorker 
对 象 的 使 用 方法 与 专用 线程 Worker 对 象 方法 类 似 , 使 用 原则 同样 是 不 能 调用 页 面 中 的 
DOM 元 素 、 全 局 变量 和 全 局 函数 等 。 共 享 线程 的 错误 处 理 和 终止 线程 方法 同样 与 专用 线 
程 类 似 , 但 又 有 一 些 不 同 ,在 此 不 再 展开 ,请 有 兴趣 的 读者 自行 搜索 学 习 。 


8.6 >=> m 


1. JavaScript 语言 是 否 支持 多 线程 ”怎样 实现 多 线程 ? 

2. Web Worker 是 什么 ? 使 用 它 有 什么 好 处 ? 

3. Web Worker 的 代码 段 对 主页 面 线程 的 访问 性 如 何 ? 有 哪些 限制 ? 
4. 
5 
6 


仿照 本 章 实例 ,使 用 Web Worker 实现 汉 诺 塔 计算 和 斐 波 那 契 数列 计算 。 


- Web Worker 与 页 面 主线 程 的 通信 方式 是 怎样 的 ? 
. 利用 Web Worker 与 页 面 主线 程 的 通信 ,请 基于 本 章 实例 ,将 费时 任务 的 进度 信息 


显示 在 主页 面 中 ,来 反映 一 个 Web Worker 中 任务 的 当前 完成 情况 。 


T. 
8. 
9. 


在 Web Worker 支线 程 中 ,如 果 出 现 错误 将 如 何 反馈 到 页 面 主线 程 ? 
什么 是 共享 线程 ? 它 与 Web Worker 工作 线程 之 间 有 什么 区 别 和 联系 ? 
共享 线程 之 间 的 通信 是 如 何 实现 的 ?如 果 共 享 线程 出 现 运行 错 误 , 又 将 如 何 反馈 到 


页 面 中 ? 
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在 Web 应 用 中 ,数据 一 般 可 以 被 保存 到 两 个 地 方 : 一 个 地 方 是 Web 服务 器 ; 另 一 个 地 
方 是 Web 客户 端 , 即 本 地 。 

保存 到 Web 服务 器 的 数据 通常 有 以 下 几 类 ,首先 是 用 户 在 网 站 的 注册 信息 ,利用 它 
Web 服务 器 可 对 用 户 身份 进行 识别 与 认证 ,包括 访客 在 Web 服务 器 所 保存 的 登录 用 户 名 、 
邮箱 号 .手机 号 .密码 等 。 然 后 是 这 个 用 户 的 个 人 隐私 数据 ,可 以 是 购物 商城 上 用 户 的 浏览 
记录 、 购 买 记录 、 个 人 收 货 地 点 等 。 这 两 类 信息 对 用 户 来 说 是 私密 的 \ 不 希望 被 别人 获取 或 
dis. DESI Web 服务 器 ,可 以 由 网 站 的 管理 人 员 统 一 维护 ,从 而 安全 有 效 地 运行 网 站 
相关 业务 ,并 保护 用 户 的 个 人 隐私 。 除 此 之 外 ,Web 服务 器 还 可 以 帮助 用 户 保存 一 些 较 大 
的 文件 , 随 着 云 服务 相关 业务 的 兴起 ,许多 企业 都 提供 云端 的 文件 管理 系统 ,如 各 种 网 盘 、 云 
服务 器 等 。 用 户 可 以 把 一 些 较 大 的 文件 保存 到 云端 ,而 不 是 保存 到 空间 有 限 的 本 地 , 既 为 用 
户 节省 了 本 地 存储 空间 ,又 提高 了 所 保存 文件 的 可 访问 性 ,用 户 可 以 在 任何 时 间 、 任 何 环境 
下 来 访问 文件 。 

但 是 将 数据 保存 到 Web 服务 器 必然 需要 用 户 本 地 与 Web 服务 器 的 频繁 通信 以 及 数据 
交换 ,而 过 于 频繁 的 通信 会 增加 用 户 在 这 个 过 程 中 等 待 响应 的 时 间 , Web 应 用 的 交互 性 随 
之 下 降 , 同 时 也 降低 了 应 用 的 用 户 体 验 。 因 此 ,在 有 些 情况 下 , Web 应 用 的 设计 者 希望 可 以 
在 用 户 本 地 存储 一 些 无 关 紧 要 的 数据 ,来 提升 应 用 的 交互 性 。 

保存 到 Web 客户 端 本 地 的 数据 来 源 , 一 般 来 说 是 一 些 较 小 的 、 相 对 来 说 不 是 很 重要 的 
信息 ,有 时 还 可 能 是 琐碎 的 ,即使 没有 也 不 会 影响 一 个 网 站 主 业 务 的 进行 。 它 可 以 是 用 户 的 
个 人 偏好 设置 ,比如 网 页 的 风格 样式 ,或 是 经 常 关注 的 标签 等 。 也 可 以 是 应 用 状态 的 保存 ， 
比如 之 前 在 某 购物 网 站 最 后 停留 的 那个 页 面 ,或 是 未 完成 支付 购买 的 那个 商品 ,然后 在 用 户 
登录 的 那 一 刻 直 接 跳 转 到 相应 页 面 或 商品 。 这 样 的 设计 能 够 让 用 户 的 使 用 更 加 方便 ,顺畅 ， 
同时 诸如 此 类 的 信息 ,很 多 时 候 是 比较 琐碎 的 ,如 果 统 一 到 W eb 服务 器 端 ,有 时 反而 会 增加 
存储 和 管理 的 负担 。 

在 HTML5 之 前 ,本 地 保存 的 唯一 方案 是 cookie, 相 信 很 多 人 对 这 个 名 词 都 不 陌生 。 许 
多 人 认为 它 不 安全 ,可 能 被 植 人 恶意 脚本 或 是 暴露 隐私 。 但 需要 知道 的 是 ,cookie 目前 仍 有 


诞生 于 互联 网 的 早期 ,可 以 说 是 与 互联 网 一 起 成 长 起 来 的 。 最 早 它 解决 的 问题 是 记录 关键 
的 用 户 信息 , 当 访 客 再 次 访问 时 ,让 浏览 器 知道 这 次 的 访客 与 之 前 的 访客 是 同一 个 人 。 随 着 
技术 的 进步 , Web 服务 器 端 数据 库 的 数据 与 服务 器 端 session 的 机 制 让 用 户 认证 变 得 更 有 
效 、 更 安全 。cookie 的 主要 应 用 就 转向 了 本 地 存储 用 户 偏好 设 定 , 为 用 户 提供 一 些 便利 ,在 
很 多 情况 下 ,无 须 用 户 再 重复 填写 一 些 东 西 ,提升 了 用 户 体验 ,但 随 之 而 来 的 就 是 安全 与 隐 
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私 方面 的 顾虑 。 除 此 之 外 ,cookie 另 一 个 整 端 是 存储 的 容量 只 有 4KB, 并 且 需 要 不 断 地 在 
服务 器 与 浏览 器 间 传 递 ,影响 了 页 面 传输 的 效率 。 同 时 cookie 的 数据 是 有 时 效 的 ,一 定时 
间 之 后 会 过 期 而 删除 。 

为 了 提供 更 好 的 本 地 存储 功能 、 更 大 的 存储 空间 ,满足 更 多 不 同 的 需要 ,HTML5 新 增 
了 Web Storage。Web Storage 能 够 在 用 户 本 地 保存 更 多 的 数据 ,可 选择 性 地 永久 保存 ,并 
且 提 供 更 简单 的 JavaScript 操作 方法 ,同时 也 免 去 了 反复 提交 给 Web 服务 器 的 步骤 。 


9.1 Web Storage 


HTMLS 的 Web Storage 可 以 让 用 户 在 本 地 保存 一 些 数据 ,而 且 可 以 不 像 cookie 那样 ， 
随 着 HTTP 请 求 的 传递 而 传递 ,并 且 拥 有 更 大 的 存储 空间 。 

Web Storage 提供 了 两 种 不 同 生命 周期 的 数据 保存 模式 ,分 别 是 本 地 存储 (Local 
Storage) 和 会 话 存储 (Session Storage)。 本 地 存储 可 以 长 期 保存 信息 ; 而 会 话 存储 的 信息 
只 在 当前 页 面 内 保存 , 当 页 面 关闭 之 后 信息 删除 重 置 。 两 种 存储 方式 都 只 能 由 同一 域 下 的 
应 用 所 访问 ,不 能 跨 域 访问 。 


9.1.1 添加 和 读 取 数据 


Web Storage 的 实现 依赖 于 window 对 象 下 的 localStorage 对 象 与 sessionStorage 对 
象 ,二 者 的 使 用 方式 几乎 相同 。 下 面 通过 一 个 实例 来 一 起 学 习 , 该 实例 在 浏览 器 中 的 展示 效 
果 如 图 9.1 所 示 。 


[ Web Storage 


C Q file:///F:/wamp/www/Web%20Storage/Web%20Storag: %® sr | $ @ ØD : 





Local Storage Session Storage 





图 9.1 Web Storage 基 本 使 用 


文件 名 : Web Storage 添加 和 读 取 数据 . html 


«! DOCTYPE HTML > 
< html lang = "en- US"> 
<head> 

< meta charset = "UTF — 8"> 

« title» Web Storage </title> 


«style» 

. displayArea( 
height:50px; 
width:200px; 
border:dashed 2px black; 

) 

. demo( 
float:left; 
padding - left:20px; 

) 

</style> 
</head> 
<body> 


< div class = "demo"> 
< h3 > Local Storage </h3 > 
< input type = "text" id= "localInput" /> 
< button id= "localSaveBtn" onclick = "saveLocalStorage()"> 保 存 </button > 


< hà > 所 保存 数据 </h4 > 
< div id = "localStorageDisplay" class = "displayArea"> 
«/div» 

</div> 


< div class = "demo"> 
< h3 > Session Storage «/h3 > 
< input type = "text" id= "sessionInput" /> 
< button id = "sessionSaveBtn" onclick = "saveSessionStorage()"»[f ff«/button» 


< hà > 所 保存 数据 </h4 > 
<div id = "sessionStorageDisplay" class = "displayArea"» 
</div> 

</div> 

<script> 


var displayLocal = document. getElementById("localStorageDisplay"); 
var displaySession = document. getElementById("sessionStorageDisplay"); 
displayLocal. innerHTML = localStorage. getItem("data"); 
displaySession. innerHTML = sessionStorage.getItem("data"); 
function saveLocalStorage( ){ 
inputText = document.getElementById("localInput"); 
localStorage. setItem("data", inputText. value); 
displayLocal. innerHTML = localStorage.getlItem("data"); 
) 
function saveSessionStorage()í 
inputText = document. getElementById("sessionInput"); 
sessionStorage. setItem("data", inputText. value); 
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displaySession. innerHTML = sessionStorage.getltem("data"); 
) 
</script> 
</body> 
</html> 


在 这 个 实例 中 ,有 两 个 < div > 标签 作为 本 地 存储 和 会 话 存储 的 展示 区 域 , 在 < style > 标 
签 内 依据 所 设置 的 class 类 名 ,为 这 两 个 < div > 元 素 添加 风格 样式 ,并 呈现 上 面 图 片 中 的 运 
行 效果 。 两 个 展示 区 域 都 包括 三 个 部 分 : 输入 框 .按钮 以 及 所 保存 数据 的 显示 区 域 。 在 输 
人 框 内 输入 数据 并 单 击 “ 保 存 ” 按 钮 后 ,页 面 将 通过 本 地 存储 或 是 会 话 存 储 方式 将 所 输入 数 
据 进行 保存 。 

下 面 来 详细 分 析 代 码 。 


function saveLocalStorage()( 
inputText = document.getElementById("localInput"); 
localStorage. setItem("data", inputText. value); 
displayLocal. innerHTML = localStorage. getlItem("data"); 
) 


在 Local Storage 标题 下 的 “保存 ?按钮 中 ,添加 了 单 击 事件 的 处 理 函 数 saveLocalStorageO 。 
在 这 个 处 理 函 数 中 ,主要 使 用 的 是 localStorage 对 象 , 即 本 地 存储 对 象 。 在 存储 数据 的 过 程 
中 ,分 别 使 用 了 该 对 象 下 的 setltem() 和 getItem() 方 法 。 本 地 存储 与 会 话 存储 均 采 用 了 键 
值 对 的 存储 方式 , 即 每 个 数据 都 有 一 个 独特 的 标识 符 作 为 键 , 在 存储 时 键 与 其 对 应 的 数据 同 
时 被 记 入 。 在 读 取 数 据 时 ,只 需 根据 键 就 可 以 找到 并 读 出 其 对 应 的 数据 。setItem() 方 法 对 
应 添加 数据 的 过 程 ,通过 输入 键 与 值 来 完成 数据 添加 。 故 第 一 个 输入 参数 作为 键 的 字符 串 。 
第 二 个 参数 作为 键 所 对 应 数据 的 字符 串 。 同 理 ,getItem() 方 法 用 于 输入 键 的 字符 串 , 然 后 
就 可 以 找到 这 个 键 所 对 应 的 数据 ,并 返回 所 保存 数据 。 

在 这 个 实例 中 ,使 用 localStorage 对 象 存储 数据 ,输入 "data" 字 符 串 作为 键 ,并 将 输入 框 
中 的 数据 作为 输入 数据 ,与 键 相 匹配 。 然 后 ,再 通过 getItem() 方 法 ,将 键 值 "data" 作 为 参数 
传人 ,取出 刚才 存储 的 数据 ,并 显示 到 页 面 中 的 相应 区 域 。 

以 输入 Hello 为 例 , 单 击 “ 保 存 ” 按 钮 ,可 以 看 到 图 9. 2 所 示 的 效果 ,输入 的 数据 保存 到 
本 地 并 被 显示 到 指定 区 域 。 

打开 浏览 器 的 调试 界面 ,并 选择 Application 一 栏 , 在 这 个 界面 中 可 以 看 到 数据 存储 的 
相关 管理 信息 。 单 击 Local Storage 并 查看 ,可 以 看 到 在 页 面 中 保存 的 键 值 对 ,如 图 9. 3 
所 示 。 

对 于 存 取 数据 ,除了 使 用 setItem() 方 法 和 getItem() 方 法 外 ,还 可 以 使 用 索引 的 方式 存 
取 , 将 实例 中 的 saveLocalStorage() 可 以 改写 成 如 下 形式 ,依然 可 以 达到 同样 的 效果 。 


function saveLocalStorage()( 
inputText = document.getElementById("localInput"); 
localStorage["data"] = inputText. value; 
displayLocal. innerHTML = localStorage["data"]; 



































9.2 localStorage 输入 数据 


m, 
(R ñ] | Elements Console Sources Network Performance Memory Application Security Audits | 
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ËB Manifest Key Value 
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9.3 localStorage 调试 界面 


对 于 会 话 存储 ,其 具体 的 存 取 过 程 与 本 地 存储 方式 完全 一 样 , 所 不 同 的 是 会 话 存储 通过 
sessionStorage 对 象 ( 即 会 话 存储 对 象 ) 来 实现 ,此 处 不 再 费 述 。 按 照 上 述 的 测试 方法 ,继续 
在 另 一 个 Session Storage 标题 下 的 输入 框 中 输入 World, 并 单 击 “ 保 存 ” 按 钮 , 即 可 看 到 
图 9.4 所 示 的 效果 。sessionStorage 对 象 所 保存 的 存储 数据 ,也 可 以 在 调试 界面 查看 ,如 
图 9.5 所 示 , 类 似 于 本 地 存储 的 查看 方法 。 


可 以 看 到 ,localStorage 对 象 与 sessionStorage 对 象 的 使 用 方式 几乎 相同 ,都 可 以 通过 
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图 9.4  sessionStorage 输入 数据 
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图 9.5 sessionStorage 调试 界面 


setItem() 和 getItem() 或 是 通过 索引 的 方式 来 存 取 键 值 对 。 在 浏览 器 的 调试 界面 可 以 看 
到 ,本 地 存储 和 会 话 存储 以 站 点 分 类 来 存 取 数 据 , 且 由 于 安全 性 考虑 存 取 的 操作 仅 限于 同一 
站 点 的 相关 资源 , 即 同 域内 操作 。 二 者 的 区 别 在 于 所 存储 数据 的 生命 周期 不 同 。 对 于 本 地 
存储 来 说 , 它 所 存储 的 数据 可 以 说 是 永久 的 (在 不 进行 删除 的 前 提 下 )。 对 于 会 话 存 储 来 说 ， 
它 所 存储 的 数据 是 暂时 的 , 仅 在 当前 会 话 进行 的 相关 页 面 内 有 效 , 当 本 次 会 话 的 所 有 页 面 全 
部 关闭 后 ,以 本 次 会 话 为 单位 保存 的 会 话 存储 数据 将 不 复 存 在 。 

在 上 述 实例 中 ,关闭 已 运行 的 页 面 ,然后 重新 运行 页 面 ,就 可 以 看 到 本 地 存储 和 会 话 存 


储 两 种 方式 所 存储 的 数据 在 生命 周期 上 的 区 别 了 。 可 以 发 现 ,使 用 localStorage 对 象 进行 
存储 的 数据 还 保持 不 变 , 而 使 用 sessionStorage 对 象 存储 的 数据 不 见 了 ,如 图 9.6 所 示 。 
































图 9.6 重新 打开 相同 页 面 ,会 话 存储 数据 清空 


下 面 尝 试 在 这 个 实例 的 代码 中 添加 一 个 到 其 他 页 面 的 跳 转 链接 ,在 浏览 器 中 运行 代码 
后 ,并 在 Session Storage 标题 下 完成 数据 的 存储 。 然 后 单 击 新 添加 的 跳 转 链接 ,从 而 跳 转 


到 另 一 个 页 面 , 最 后 再 次 打开 调试 页 面 , 可 以 发 现 之 前 保存 的 会 话 存储 数据 还 在 ,这 说 明 会 
话 存储 数据 的 生命 周期 以 当 次 会 话 为 单位 。 这 一 过 程 如 图 9.7 和 图 9. 8 所 示 
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图 9.7 通过 添加 链接 构造 同一 会 话 
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如 果 再 新 建 一 个 页 面 并 运行 同样 的 实例 ,会 发 现 第 一 个 页 面 中 保存 的 会 话 存储 数据 在 
新 创建 页 面 中 并 不 存在 。 
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9.8 同一 会 话 内 的 Session Storage 依然 可 用 


9.1.2 删除 数据 


由 于 本 地 存储 与 会 话 存储 的 区 别 仅 限于 生命 周期 和 所 使 用 的 对 象 等 不 同 ,所 以 为 了 
简洁 , 接 下 来 的 相关 实例 均 以 localStorage 对 象 为 例 , sessionStorage 对 象 也 可 实现 相关 
操作 。 

Web Storage 提供 了 两 种 删除 数据 的 方式 : 一 种 方式 是 选择 特定 键 值 对 进行 删除 ; 另 
一 种 方式 是 将 数据 全 部 删除 。 如 下 实例 制作 了 一 个 宠物 相关 信息 的 卡片 ,将 宠物 信息 保存 
到 Web Storage 中 ,并 可 以 通过 “删除 ”按钮 完成 删除 相关 的 操作 。 

文件 名 : Web Storage 删除 数据 . html 


<! DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF - 8"> 
« title» Remove and Clear </title> 
«style» 
fieldset( 
width:300px; 
) 
input( 
float:right; 
H 


.item( 
padding - top:5px; 
padding - bottom: 7px; 
) 
</style> 


</head> 
<body> 


<form> 
< fieldset > 


< legend > 宠物 身份 牌 </legend> 


< div class = "item"> 


WAT: 


< input type = "text 


</div> 
<div class = "item"> 


宠物 种 类 : 


id= "petName"/> 


< input type = "text" id = "petKind" /> 


</div> 
<div class = "item"> 


宠物 主人 姓名 : 


< input type = "text" id= "petOwner"/> 


</div> 
<div class= "item"> 


宠物 主人 电话 : 


< input type = "text" id= "tel"/> 


</div> 


< button onclick = "saveInfo( )"> 保 存 </button> 


< button onclick = "remove( )"> 删 除 </button> 


</fieldset > 
</form> 
X div id= "displayArea"> 
</div> 
<script> 
function saveInfo()( 


var petName = document. getElementById("petName"); 
var petKind = document. getElementById("petKind"); 
var petOwner = document. getElementById("petOwner"); 


var tel = document.getElementById("tel"); 
localStorage["pet name"] - petName. value; 
localStorage["pet kind"] = petKind. value; 
localStorage["pet owner"] = petOwner. value; 


localStorage["tel"] = 
) 
function removeAll()( 
localStorage.clear(); 
) 


function remove()( 


tel. value; 


localStorage. removeltem("tel") 


) 


</script> 


</body> 


3446 


J co wi 


HTML5 实用 教程 





</html > 


首先 ,在 表单 中 完成 相应 数据 的 填写 并 单 击 “ 保 存 ” 按 钮 ,将 信息 保存 至 本 地 存储 ,如 
图 9.9 所 示 。 


[À Remove and Clear x 





C Q file///F/wamp/www/Web9620Storage/MiéEtig.htm| E t S o Rl : 
宠物 身份 牌 
宠物 名 字 : e= 
宠物 种 类 : E 
宠物 主人 姓名 : ”| 一个 人 的 和 名字 
宠物 主人 电话 : [01010101010 O] 














9.9 填写 数据 并 保存 


然后 打开 调试 界面 ,找到 刚才 保存 的 数据 ,如 图 9. 10 所 示 。 如 果 再 单 击 页 面 内 的 “ 删 
除 ” 按 钮 ,并 刷新 调试 界面 ,就 可 以 看 到 之 前 的 一 条 键 为 tel 的 记录 被 删除 。 
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图 9. 10 删除 单条 记录 


在 这 个 实例 中 ,HTML 页 面 由 所 要 填写 的 表单 与 两 个 按钮 组 成 ,为 了 展示 的 美观 ,在 
< style > 标签 内 加 入 一 些 样式 .“ 删 除 ? 按 钮 对 应 了 本 节 所 要 展示 的 删除 键 值 对 方法 .“ 删 


除 ” 按 钮 所 触发 的 单 击 事件 即 是 JavaScript 代码 中 的 remove O P8 88. fix 4 ER 2k rh. m pr 
localStorage 对 象 的 removeltem() 方 法 实现 了 本 地 存储 信息 的 选 定 删除 。removeItem() 方 
法 所 输入 的 参数 为 所 选择 删除 键 值 对 的 索引 , 即 键 字 符 串 。 在 本 例 中 ,所 要 删除 的 键 值 对 的 
键 为 tel, 所 以 将 该 字符 串 输入 ,然后 实现 对 该 键 值 对 的 选 定 删除 。 

除了 可 以 单个 删除 数据 外 ,localStorage 对 象 也 支持 全 部 删除 , 即 清空 当前 站 点 下 的 本 
地 存储 数据 。 使 用 的 是 localStorage 对 象 下 的 clear() 方 法 ,无 须 传人 参数 , 即 可 对 全 部 数据 
进行 删除 。 将 上 述 实例 中 的 “删除 ”按钮 的 单 击 事件 处 理 函数 蔡 换 成 removeAll() 即 可 测试 
该 功能 。 在 这 个 处 理 函数 中 , 仅 有 一 行 代码 localStorage. clear() , 它 完 成 了 对 当前 站 点 全 部 
本 地 存储 清空 的 功能 。 


9.1.3 查找 所 有 数据 


Web Storage 还 提供 了 通过 索引 获取 键 的 方法 ,这 样 就 可 以 通过 这 个 方法 进行 全 部 存 
储 数据 的 访问 。 请 在 上 述 实例 中 的 JavaScript 的 代码 段 添加 如 下 代码 。 


window. onload = function showInfo(){ 
var displayArea = document. getElementById("displayArea"); 
var item - ""; 
for (var i= 0;i« localStorage. length; i++ )( 
var key = localStorage.key(i); 
item += key + ": " + localStorage[key] + "<br />"; 
) 
displayArea. innerHTML = item; 
}; 


重新 填写 好 表单 ,将 相关 信息 保存 至 本 地 存储 后 刷新 页 面 ,就 可 以 看 到 图 9. 11 所 示 的 
效果 。 
































pet_name: 橡皮 
pet owner: 一 个 人 的 名 字 
tel: 101010101010 





How 


图 9.11 显示 全 部 信息 
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在 这 段 代 码 中 ,新 添加 了 一 个 onload 事件 以 及 处 理 函 数 。 在 这 个 函数 中 有 一 个 for 循 
环 来 遍历 本 地 存储 中 的 每 一 个 键 值 对 。localStorage 对 象 的 属性 length 可 以 获取 到 本 地 存 
储 键 值 对 的 总 长 度 。 通 过 localStorage 对 象 的 属性 key, 可 以 以 索引 的 方式 , 按 序 读 取 每 一 
个 存储 于 本 地 存储 中 的 键 值 对 的 键 值 。 这 样 就 可 以 很 方便 地 对 本 地 存储 的 全 部 存储 数据 进 
行 访问 与 处 理 。 


9.1.4 响应 存储 变化 


在 数据 的 存 取 过 程 中 ,经 常 要 解决 的 问题 就 是 数据 一 致 性 的 问题 ,有 时 在 一 个 页 面 中 改 
变 了 某 一 数据 ,而 在 另 一 个 页 面 中 相同 数据 的 显示 保持 不 变 , 这 样 就 产生 了 数据 不 一 致 的 问 
题 。 在 多 个 页 面 或 是 多 个 应 用 对 同一 数据 进行 存 取 的 过 程 中 ,经 常 要 应 对 这 样 的 情况 。 

为 了 避免 出 现 数据 不 一 致 而 导致 混乱 的 情况 ,Web Storage 提供 了 响应 存储 变化 的 机 
制 。 当 在 一 个 页 面 中 对 某 一 数据 进行 操作 时 ,其 他 相关 的 页 面 都 要 对 这 个 变化 有 所 反应 ,来 
保持 数据 的 一 致 性 。 

本 节 的 实例 依然 以 本 地 存储 localStorage 对 象 为 例 ,而 sessionStorage 对 象 与 此 相 类 
似 ,不 同 的 是 响应 存储 变化 的 页 面 范围 有 所 不 同 。 本 地 存储 的 存储 变化 事件 在 相同 站 点 下 
的 页 面 内 传播 , 却 不 在 发 生 数据 改变 的 页 面 内 传播 ; 而 会 话 存储 的 存储 变化 事件 则 只 在 同 
一 页 面 下 进行 响应 , 换 句 话说 ,sessionStorage 的 存储 变化 不 进行 页 面 间 的 传递 ,即便 是 相 
同 会 话 。 另 外 还 需要 注意 的 是 ,本 节 的 实例 需要 部 署 在 服务 器 环境 ,才能 完整 实现 。 

基于 之 前 宠物 名 牌 的 实例 ,继续 如 下 代码 。 

文件 名 : 响应 存储 变化 . html 


<! DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF — 8"> 
<title> 响 应 存储 变化 </title> 
< style> 
fieldset{ 
width:300px; 
} 
input{ 
float:right; 
) 
. item( 
padding - top:5px; 
padding - bottom:7px; 
) 
</style> 
</head> 
<body> 
<form> 
<fieldset > 
< legend > 宠物 身份 牌 </legend> 


<div class= "item"> 





WAY: 
< input type = "text" id= "petName" /> 


</div> 
<div class = "item"> 

宠物 种 类 :: 

< input type = "text" id = "petKind" /> 
</div> 
< div class = "item"> 

宠物 主人 姓名 : 

< input type = "text" id= "petOwner"/> 
</div> 
< div class = "item"> 

宠物 主人 电话 : 

< input type "text" id = "tel"/> 
</div> 
< button onclick = "saveInfo( ) "> 保存 </button > 

</fieldset > 


</form> 
<div id= "displayArea"> 
</div> 
< Script> 
window. addEventListener("storage", storageChanged); 
window. onload = function showInfo()( 
var petName = document. getElementById("petName"); 
var petKind = document. getElementById("petKind"); 
var petOwner - document. getElementById("petOwner"); 
var tel = document. getElementById("tel"); 
petName.value = localStorage["pet name"]; 
petKind.value = localStorage["pet kind"]; 


petOwner.value - localStorage["pet owner"]; 
tel.value = localStorage["tel"]; 
// 添 加 一 个 storage 事件 的 监听 
window. addEventListener("storage", storageChanged) ; 
}; 
//storage 事件 的 处 理 函 数 
function storageChanged(e){ 
displayArea. innerHIML += e.url + "<br />"; 
displayArea. innerHTML += e.key + "发 生 了 改变 < br />"; 
displayArea. innerHTML += "由 原来 的 " * e.oldValue + "«br />"; 
displayArea.innerHTML += " 变 为 了 " + e.newValue + "<br />"; 
) 
function saveInfo()( 
var petName = document. getElementById("petName");; 
var petKind = document. getElementById("petKind"); 
var petOwner = document. getElementById("petOwner"); 
var tel = document.getElementById("tel"); 
localStorage["pet name"] = petName. value; 
localStorage["pet kind"] = petKind. value; 
localStorage["pet owner"] = petOwner. value; 
localStorage["tel"] = tel.value; 
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) 
</script> 
</body> 
</html> 


将 代码 部 署 于 服务 器 环境 并 访问 ,打开 两 个 页 面 , 在 其 中 一 个 页 面 内 更 改 一 个 数据 的 
值 ,并 单 击 “ 保 存 ? 按 钮 ,然后 观察 另 一 个 页 面 的 显示 内 容 , 如 图 9. 12 所 示 。 
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http://localhost:8088/Web9620Storage/9?6e59693968d96e596ba9?69496e596ad969896659682"| 
pet_name 发 生 了 改变 





9.12 响应 存储 变化 


在 这 个 版 本 的 宠物 名 牌 表单 中 ,我们 为 表单 添加 了 一 个 onload 事件 ,在 页 面 加 载 完成 
后 即将 已 有 的 本 地 存储 信息 填写 到 表单 中 , 待 使 用 者 做 出 更 改 。 然 后 在 当前 页 面 添加 一 个 
storage 事件 的 监听 ,并 指定 相应 的 事件 处 理 函数 storageChanged() ,在 本 地 存储 数据 出 现 
变化 后 进行 响应 。 
在 处 理 函 数 storageChanged O (代码 如 下 ) 中 ,将 本 地 存储 的 变化 像 日 志 一 样 描述 出 来 。 
//storage 事件 的 处 理 函 数 
function storageChanged(e)( 
displayArea.innerHTML += e.url + "<br />"; 
displayArea. innerHTML += e.key + "发 生 了 改变 <br />"; 
displayArea. innerHTML += "由 原来 的 " * e.oldValue + "<br />"; 
displayArea. innerHTML += " 变 为 了 " + e.newValue + "<br />"; 
) 


打开 两 个 页 面 后 ,两 个 页 面 内 宠物 名 牌 表单 中 的 输入 框 便 会 自动 填写 为 之 前 所 保存 的 
值 。 若 没有 保存 , 则 呈现 undefined。 选 择 其 中 一 个 页 面 , 在 输入 框 中 将 宠物 的 名 字 , 由 之 前 
的 “橡皮 ” 改 为 “ 狗 子 ”, 单 击 “ 保 存 ” 按 钮 。 

当 执 行 保存 相关 信息 程序 时 , Web Storage 会 自动 检查 当前 输入 的 值 是 否 与 之 前 保存 


的 值 有 所 区 别 , 如 果 没 有 区 别 就 不 做 响应 , 若 出 现 上 述 区 别 时 ,就 会 触发 其 他 相同 站 点 内 的 
页 面 的 storage 事件 。 需 要 注意 的 是 ,这 样 的 触发 是 以 键 值 对 为 单位 的 ,有 几 个 键 值 对 发 生 
变化 就 会 触发 几 次 storage 事件 。 在 这 里 由 于 打开 了 两 个 相同 的 页 面 , 故 都 有 storage 事件 
的 监听 与 处 理 。 每 次 变更 宠物 名 字 都 执行 一 次 storageChanged O Aib BE PR it. 2f f£ A — +° 
storage 事 件 对 象 。 在 这 个 对 象 中 .有 四 个 常用 的 属性 ,分 别 是 url, key、oldValue 和 
newValue, url 属性 描述 了 发 生存 储 变化 的 页 面 URL, key 属性 描述 了 发 生 了 变化 的 键 值 
对 的 键 ,而 oldValue 与 newValue 则 描述 了 这 个 键 所 对 应 的 旧 值 与 新 值 。 这 四 个 属性 共同 
描述 了 一 次 本 地 存储 的 数据 变化 , 正 像 图 9. 12 展示 的 那样 。 


9.1.5 数据 保存 格式 


在 存储 键 值 对 的 过 程 中 ,Web Storage 中 的 本 地 存储 和 会 话 存储 都 会 将 数据 以 字符 中 
形式 保存 ,这 样 取出 的 数据 也 将 会 是 一 个 字符 串 。 对 于 日 常 的 表单 而 言 ,文本 的 输入 占 了 很 
大 的 比例 ,Web Storage 这 样 的 设计 对 于 这 些 文本 数据 就 不 构成 障碍 ,但 是 当 存储 的 数据 不 
是 文本 时 ,数据 被 转换 为 字符 串 就 会 带 来 一 些 问题 。 比 如 , 当 存 入 数字 时 ,再 取出 后 就 变 成 
了 字符 串 , 这 样 它 就 表 失 了 作为 数字 的 一 些 特殊 属性 ,就 不 能 再 进行 一 些 运算 。 类 似 地 , 当 
我 们 存 取 的 数据 是 日 期 时 间 这 类 的 数据 时 ,单纯 地 以 字符 串 的 形式 存 取 后 就 不 能 利用 日 期 
类 型 数据 相关 属性 来 完成 一 些 业 务 逻 辑 。 本 节 将 处 理 数 值 型 数据 和 日 期 型 数据 在 Web 
Storage 存 取 过 程 中 数据 格式 的 问题 。 

首先 是 对 于 数值 型 数据 ,进行 Web Storage 相关 存储 之 后 ,然后 在 读 取 时 ,原先 的 数 
值 型 数据 就 变 为 字符 串 。 这 时 只 需 调 用 JavaScript 的 Number O PA Zi . 34 Br 9 J: £7 Fe 2e fj 
字符 串 作 为 参数 输入 ,Number() 函 数 就 会 将 这 个 字符 串 重 新 转变 为 数值 ,从 而 可 以 继续 
使 用 。 


// 将 存 人 本 地 存储 的 年 龄 重新 转换 为 数值 

age = Number(localStorage["age"]); 

// 或 者 通过 索引 方式 读 取 

age = Nunber(localStorage.getlten("age")); 


对 于 日 期 型 数据 ,比如 JavaScript 中 的 Date 对 象 实例 , 存 取 过 程 一 般 可 以 采取 转化 为 
当前 日 期 距离 1970 年 1 月 1 日 零点 的 毫秒 数 存储 。 读 取 后 再 将 之 前 的 毫秒 数 先 转化 为 数 
值 ,再 转 回 Date 对 象 。 这 样 一 个 Date 对 象 ,经 过 存 取 过 程 之 后 , 它 仍 可 以 是 一 个 Date 对 
象 ,依然 可 以 通过 Date 对 象 的 相关 方法 ,自由 地 对 日 期 型 数据 进行 格式 转换 或 是 其 他 操作 。 
如 下 实例 展示 日 期 型 数据 在 Web Storage 中 的 存 取 。 

文件 名 : 日 期 存 人 Web Storage 转化 为 字符 串 . html 


<! DOCTYPE HTML > 
<html lang = "en - US"> 
<head> 
< meta charset = "UTF — 8"> 
<title> 日 期 时 间 </title> 
</head> 
<body> 
<div id= "display"> 
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</div> 
«script» 
var display = document. getElementById("display"); 
var today = new Date(); 
localStorage["Date"] = today; 
</script> 
</body> 
</html> 


如 果 直 接 将 日 期 类 型 的 数据 存 人 Web Storage 中 , 则 会 得 到 一 个 诸如 此 类 的 字符 串 , 如 
图 9. 13 所 示 ,这 样 的 字符 串 在 取出 后 无 论 是 格式 转化 还 是 日 期 时 间 计算 都 很 烦琐 。 所 以 需 


要 另 一 种 方式 存 取 日 期 ,并 保持 日 期 类 型 。 请 看 如 下 实例 ,其 在 浏览 器 中 的 展示 效果 如 
图 9.14 所 示 。 
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图 9.13 直接 存储 Date 类 型 数据 
文件 名 : 日 期 存 取 常 用 方式 . html 


<!DOCTYPE HTML > 
< html lang = "en - US"> 
<head> 
< meta charset = "UTF — 8"> 
<title> 日 期 时 间 </title> 
</head> 
<body> 
< div id= "display"> 
</div> 
«script» 
var display = document. getElementById("display"); 
var today 7 new Date(); 
localStorage["Date"] = today.getTime(); 
var displayDate = new Date(Number(localStorage["Date"])); 
display. innerHTML = displayDate; 


</script> 
</body> 
</html> 





» fed | © fileWW/Fywamp/www/Web%20Storage/ 日 期 时 间 html a *| esol: 








Wed Jul 26 2017 20:53:59 GMT +0800 (中 国标 准时 间 ) 





9.14 日 期 存 取 常用 方式 


在 存储 时 ,通过 Date 对 象 的 getTime() 方 法 ,将 其 转化 为 距离 1970 年 1 月 1 日 零点 的 
毫秒 数 进行 存储 。 这 样 的 时 间 差 数据 类 型 为 数值 ,而 数值 与 字符 串 相 互 转换 又 相对 简单 ,这 
样 就 将 Web Storage 存储 过 程 中 的 字符 串 转 化 带 来 的 麻烦 降 到 最 小 。 取 出 数据 后 再 做 字符 
串 到 数值 的 转换 ,并 使 用 这 个 数值 ,重新 构造 一 个 Date 对 象 , 从 而 完成 之 前 所 存储 Date 对 
象 的 还 原 。 


9.1.6 对 象 的 保存 


9.1.5 节 主要 介绍 了 Web Storage 的 保存 数据 的 字符 串 化 机 制 , 以 及 在 特殊 情况 下 数 
值 . 日 期 对 象 的 保存 与 还 原 。 在 实际 应 用 中 ,也 常常 遇 到 类 似 日 期 那样 以 对 象 为 单位 的 存储 
数据 。 比 如 之 前 的 宠物 名 牌 表单 ,在 实际 应 用 中 ,可 能 存储 的 并 不 是 一 个 宠物 名 牌 的 相关 属 
性 ,而 是 许多 宠物 名 牌 ,这 时 需要 将 每 个 宠物 名 牌 作 为 对 象 保存 ,而 不 是 存储 每 个 宠物 名 牌 
的 每 个 键 值 对 。 这 样 在 使 用 Web Storage 时 ,就 与 之 前 有 了 一 些 不 同 。 需 要 将 自 定义 的 对 
象 以 字符 串 的 方式 存储 进去 ,并且 在 取出 字符 串 后 ,还 要 将 其 还 原 成 之 前 的 对 象 。 

这 时 需要 利用 JSON 编码 ,JSON(JavaScript Object Notation. JavaScript 对 象 标记 ) 是 
一 种 轻 量 级 的 数据 交换 格式 ,并 且 在 各 种 浏览 器 中 都 支持 。JSON 可 以 把 结构 化 数据 形式 
的 对 象 转换 为 一 种 简单 格式 的 文本 ,同时 也 可 以 把 文本 还 原 成 对 象 。 这 样 就 可 以 通过 
JSON 将 对 象 保存 到 Web Storage, 在 读 取 后 又 可 以 轻易 地 还 原 回 对 象 。 
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继续 之 前 的 宠物 名 牌 实例 ,这 次 以 一 个 宠物 名 牌 对 象 为 单位 进行 保存 和 读 取 , 该 实例 在 
浏览 器 中 的 展示 效果 如 图 9. 15 所 示 ,相应 的 调试 界面 如 图 9. 16 所 示 。 
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图 9.15 对 象 的 保存 
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图 9.16 对象 保存 的 调试 界面 信息 
文件 名 : 自 定义 对 象 的 存 取 . html 


<!DOCTYPE HTML > 
<html lang = "en 一 US"> 
< head» 
< meta charset = "UTF - 8"> 


<title> 自 定义 对 象 存 取 </title> 


< style> 
fieldset( 
width:300px; 
) 
input( 
float:right; 
) 
.item{ 
padding- top:5px; 
padding - bottom: 7px; 
) 
</style> 
</head> 
< body> 
< form> 
< fieldset > 
< legend > 宠物 身份 牌 </legend > 
<div class= "item"> 
宠物 名 字 : 
< input type = "text" id = "petName" /> 
«/div» 
<div class = "item" 
宠物 种 类 : 
< input type = "text" id = "petKind"/> 
</div> 
< div class = "item"> 
宠物 主人 姓名 : 
< input type = "text" id= "petOwner"/> 
</div> 
<div class = "item"> 
宠物 主人 电话 : 
< input type = "text" id= "tel"/> 
</div> 
< button onclick = "saveInfo( )"> 保 存 </button> 
</fieldset > 
</form> 
<div id= "displayArea"> 
</div> 
< Script> 


window. onload = function(){ 
for (var i= 0;i« localStorage. length; i++ ){ 
var keyString 7 localStorage.key(i); 
var dog = JSON.parse(localStorage[keyString]); 
var displayArea = document. getElementById("displayArea"); 
displayArea. innerHTML += "宠物 名 字 : ”+ dog.petName + "<br /»"; 





displayArea.innerHTML += "宠物 种 类 : " 
displayArea. innerHTML += "主人 姓名 : " 
displayArea. innerHTML += "主人 电话 : " 


+++ 


dog. petKind + "<br />"; 
dog.petOwner + "<br /»"; 
dog.tel + "<br /><br />"; 
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H 
function dogCard(petName, petKind, petOwner, tel) { 
this.petName - petName; 
this.petKind = petKind; 
this.petOwner - petOwner; 
this.tel - tel; 
) 
function saveInfo()( 
var petName = document. getElementById("petName"); 
var petKind = document. getElementById("petKind"); 
var petOwner = document. getElementById("petOwner"); 
var tel = document.getElementById("tel"); 
var dog 7 new dogCard(petNane. value, petKind. value, petOwner. value, tel. value); 
localStorage[petName.value] = JSON.stringify(dog); 
alert(" 成 功 保存 狗 子 信息 "); 
) 
«/script» 
</body> 
</html> 
代码 中 声明 了 一 个 JavaScript 对 象 dogCard 的 构造 函数 ,并 在 保存 宠物 名 牌 信息 时 , 进 
行 dogCard 对 象 的 构造 。 然 后 在 保存 到 Web Storage 时 ,将 对 象 通过 JSON 的 stringify() 
方法 转化 为 JSON 字符 串 格式 进行 保存 。 上 述 实 例 以 宠物 的 名 字 为 键 保存 了 两 个 宠物 名 牌 
信息 ,如 图 9. 16 所 示 。 为 了 将 这 些 信息 显示 到 页 面 ,我 们 在 HTML 页 面 添加 了 < div > 标 
签 ,同时 为 页 面 添加 onload 事件 ,通过 for 循环 提取 每 一 条 数据 的 键 ,然后 将 所 保存 的 
JSON 字符 串 取出 ,并 通过 parse() 方 法 ,重新 将 其 转化 为 JavaScript 对 象 , 最 后 在 页 面 
输出 。 
由 此 ,通过 JSON 对 象 的 stringify() 和 parse() 方 法 ,就 可 以 实现 JavaScript 对 象 在 
Web Storage 的 存 取 。 


9.1.7 Web Storage 与 Cookie 比较 


cookie 的 中 文 意思 是 小 甜 饼 , 它 由 网 景 (Netscape) 公 司 的 前 雇员 Lou Montulli 在 1993 
年 3 H ABH. cookie 有 时 使 用 复数 形式 cookies, 有 时 也 被 称 为 HTTP cookie, web cookie, 
browser cookie 等 。 它 是 一 个 在 浏览 器 与 服务 器 之 间 传 递 的 很 小 的 数据 。 发 明 cookie 的 初 
里 是 为 了 在 服务 器 端 进行 客户 身份 的 识别 ,随后 也 发 展 出 许多 应 用 场景 ,如 会 话 状态 的 保 
存 , 使 当前 用 户 保持 登录 状态 ; 个 人 偏好 的 服务 ,用 户 的 相关 设置 、 网 站 的 偏好 主题 ; 记录 
和 分 析 用 户 的 网 站 行为 等 。 

在 HTML5 以 前 ,cookie 不 仅 在 服务 器 与 浏览 器 间 通 过 小 部 分 数据 进行 身份 的 识别 ， 
还 同时 肩负 着 用 户 浏览 器 本 地 保存 数据 的 任务 。cookie 的 设计 目的 仅仅 是 为 了 保存 一 些 简 
单 的 用 户 信息 ,而 随 着 Web 应 用 的 迅猛 发 展 ,本 地 存储 需求 日 益 增 大 ,但 cookie 本 身体 积 
小 又 需要 在 浏览 器 与 服务 器 端 反 复 传递 ,种 种 因素 使 得 cookie 不 能 胜任 如 今 Web 应 用 的 
一 些 客户 端 存储 的 场景 ,因此 HTMLS 标准 的 Web Storage 才 应 运 而 生 ,更 好 地 实现 了 浏览 
器 端的 存储 功能 。 


就 目前 情况 来 看 ,HTML5 的 Web Storage 虽然 可 以 更 好 地 实现 cookie 的 浏览 器 本 地 
存储 功能 ,但 并 不 能 取代 cookie, 只 是 为 客户 端 存储 提供 了 更 好 的 解决 方案 。 大 部 分 的 网 站 
广泛 使 用 cookie 进行 用 户 身份 的 验证 、 会 话 状 态 的 保持 ,并 且 所 有 的 浏览 器 都 支持 cookie. 
在 浏览 器 的 调试 界面 也 可 以 看 到 不 同 站 点 所 保存 的 cookie 信息 ,如 图 9. 17 所 示 。 
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9.17 调试 界面 cookie 


由 于 本 书 主要 讨论 HTML5 相关 内 容 , 具 体 cookie 在 浏览 器 端 与 服务 器 端的 使 用 ,请 
有 兴趣 的 读者 自行 了 解 与 学 习 。 在 此 ,只 对 cookie 与 Web Storage 做 一 个 大 致 的 比较 ,可 
以 看 出 ,Web Storage 作为 客户 端 存 储 有 着 很 大 的 优势 ,这 也 为 构建 更 为 丰富 的 HTML5 本 
地 Web 应 用 提供 了 便利 。 

1. Web Storage 

° 每 个 站 点 Web Storage 存储 限制 默认 是 5MB。 
无 须 在 浏览 器 与 服务 器 之 间 传 递 。 
相关 存 取 操作 简便 ,但 只 能 在 本 地 操作 , 且 不 能 跨 域 。 
。 Local Storage 和 Session Storage 提供 了 不 同 生命 周期 的 本 地 数据 保存 ,可 以 长 期 永 

久保 存 ,也 可 以 只 存在 于 当前 会 话 。 

2. cookie 
。 每 个 cookie 的 大 小 有 4KB 的 存储 限制 。 
需要 随 着 每 次 HTTP 请 求 在 浏览 器 与 服务 器 之 间 传 递 。 
JavaScript 操作 cookie 的 方法 与 cookie 的 构造 方式 相对 复杂 ,但 是 可 以 通过 服务 器 
操作 cookie。 
每 个 cookie 数据 都 有 过 期 时 间 的 限制 ,需要 通过 手动 设置 .或 者 默认 当前 页 面 内 。 
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9.2 本 地 数据 库 


9.1 MAT HE cookie 更 好 的 本 地 存储 方式 ,让 以 前 仅 有 的 AKB 本 地 存储 一 下 跃升 到 
5MB, 大 大 地 提升 了 本 地 存储 的 空间 ,虽然 这 样 的 存储 空间 已 经 可 以 构建 许多 类 型 的 离线 
应 用 了 。 但 这 还 不 足以 像 其 他 一 些 主流 的 编程 语言 一 样 自由 地 进行 较为 复杂 存储 需求 较 
大 的 应 用 开发 。 于 是 ,为 了 支持 更 大 规模 的 本 地 存储 方式 ,HTML5 标准 开始 了 本 地 数据 库 
的 探索 。 

相信 很 多 人 都 对 数据 库 并 不 陌生 ,数据 库 能 够 提供 大 规模 的 数据 存储 快速 的 查询 和 方便 
的 管理 等 功能 。 数 据 库 在 服务 器 端 有 着 较为 广泛 的 应 用 ,网 站 将 用 户 的 基本 信息 、 用 户 名 密 
码 、 网 站 业务 等 数据 都 放 入 数据 库 进行 统一 管理 。 而 HTML5 标准 让 数据 库 在 Web 应 用 领域 
的 概念 不 仅仅 限于 服务 器 ,还 扩展 到 了 本 地 ,从 而 使 构建 更 为 复杂 地 离线 应 用 成 为 可 能 。 

目前 在 一 些 浏 览 器 中 ,可 供 选 择 的 本 地 数据 库 有 属于 关系 型 数据 库 管 理 系统 的 Web 
SQL 和 属于 非 关 系数 据 管理 系统 的 IndexedDB。 但 是 ,Web SQL 的 标准 化 文档 的 进程 已 
经 停止 了 。 可 以 说 IndexedDB 成 为 本 地 数据 库 相 关 接 口 的 最 终 建 议 。 所 以 接 下 来 本 章 以 
IndexedDB 作为 主要 内 容 。 但 是 数据 库 相 关 的 内 容 本 身 就 是 一 个 相对 复杂 的 概念 ,无 法 在 
有 限 的 篇 幅 内 涵盖 很 多 知识 ,而 IndexedDB 的 API 也 比较 复杂 ,所 以 本 章 还 接着 以 Web 
Storage 里 的 宠物 名 牌 实例 进行 讲解 ,并 只 介绍 实例 中 涉及 的 关于 本 地 数据 库 的 一 些 基 本 操 
作 , 更 为 细节 具体 的 API 请 读者 自行 学 习 。 


9.2.1 IndexedDB 


Indexed Database API( 简 称 IndexedDB, 以 前 称 WebSimpleDB) 是 W3C 推荐 的 一 项 网 
页 浏览 器 标准 ,是 为 提供 一 个 具有 索引 的 JSON 对 象 集合 的 事务 性 本 地 数据 库 操 作 接 口 。 
W3C 于 2015 年 1 月 8 日 发 布 了 IndexedDB 接口 的 最 终 建议 。 

。 IndexedDB 是 非 关系 型 数据 库 。 

。 IndexedDB 存储 数据 对 象 。 

。 IndexedDB 是 异步 的 。 

。 IndexedDB 是 基于 事务 (transaction) 的 。 

本 节 继 续 以 之 前 的 宠物 名 牌 应 用 为 例 ,使 用 IndexedDB 进行 数据 的 存储 。 在 这 里 有 两 
个 文件 ,分 别 是 本 地 数据 库 . html 作为 显示 页 面 ,petCard. js 为 页 面 提供 JavaScript 代码 。 
该 实例 在 浏览 器 中 的 展示 效果 如 图 9. 18 所 示 。 

文件 名 : 本 地 数据 库 . html 


<! DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 

< meta charset = "UTF — 8"> 

« title» IndexedDB </title> 

< style» 

fieldset( 
width:300px; 





c | © file///F/wamp/www/WebSé20Storage/petCard.html 图 *| 4 ort 








宠物 身份 牌 























宠物 名 字 : 橡皮 
E: 斑点 狗 宠物 种 类 : 金毛 大 
: 红火 忱 忽 š 主人 姓名 : 一 个 人 的 名 字 
: 123456700 话 : 主人 电话 : 32456 











9.18 本 地 数据 库 


input{ 
float:right; 
) 
.iten( 
padding - top:5px; 
padding - bottom:7px; 
) 
.card( 
margin:20px 5px 10px 10px; 
float:left; 
border:1px solid black; 
padding:10px 10px 10px 10px; 
line- height :30px; 
border - radius:10px 10px 10px 10px; 
} 
</style> 
< script src = "petCard. js"></script > 
</head> 
< body> 
«form» 
<fieldset > 
< legend> 宠 物 身 份 牌 </legend> 
< div class = "item"» 


宠物 名 字 : 第 
< input type = "text" id = "petName" /> 9 
</div> * 
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<div class = "item"> 

宠物 种 类 : 

< input type = "text" id = "petKind" /> 
«/div» 


«div class = "item" 


宠物 主人 姓名 : 
< input type = "text" id = "petOwner"/> 
«/div» 
< div class = "iten"» 
宠物 主人 电话 : 
< input type = "text" id = "tel"/> 
«/div» 
< button onclick = "saveInfo( )"> 保 存 </button> 
</fieldset > 
</form> 
<div id= "displayArea"> 
</div> 
</body> 
</html > 
文件 名 : petCard. js 
// 宠 物 名 牌 信息 对 象 


function dogCard(petName, petKind, petOwner, tel)( 
this.petName - petName; 
this.petKind - petKind; 
this.petOwner - petOwner; 
this.tel = tel; 


Į 

// 将 database 作为 全 局 变量 ,可 以 在 各 处 被 访问 到 
var database; 

window. onload = function(){ 


// 数 据 库 的 创建 与 连接 
var request = window. indexedDB. open("Card",1); 
request. onsuccess = function(e)( 
alert(" 成 功 创建 或 连接 数据 库 "); 
database = request. result; 
// 显 示 当 前 已 存储 数据 
displayCard(); 
}; 
request.onerror = function (e) ( 
alert(request. error); 
1; 
request.onupgradeneeded = function(e)( 
alert(" 将 要 初始 化 数据 库 或 更 新 "); 
var db = request. result; 
var objectStore = db.createObjectStore("Cards", ( keyPath: "petName" }); 


n 
J; 


function saveInfo()( 
// 获 取 输 入 框 数 据 
var petName = document. getElementById("petName"); 
var petKind = document.getElementById("petKind"); 
var petOwner = document. getElementById("petOwner"); 
var tel = document. getElementById("tel"); 
// 创 建 对 象 
var dog = new dogCard(petName. value, petKind. value, petOwner. value, tel. value); 
// 数 据 库 事务 
var transaction = database. transaction(["Cards"], readwrite"); 
var objectStore = transaction. objectStore("Cards"); 
var request = objectStore. put(dog) ; 
request.onerror = function(e)( 
alert(request. error); 
h 
request.onsuccess = function(e)( 
alert(" 成 功 添加 狗 子 信息 !"); 
displayCard(); 
}; 
J 
function deleteCard(element)( 
var petName = element.getAttribute("data - petName"); 
// 数 据 库 事务 
var transaction = database. transaction(["Cards"], readwrite"); 
var objectStore = transaction. objectStore("Cards"); 
var request = objectStore. delete(petName); 
request. onerror = function(e)( 
alert(request. error); 
}; 
request. onsuccess = function(e){ 
alert(petName +" 这 条 狗 子 的 信息 已 删除 "); 
// 显 示 当 前 已 存储 数据 
displayCard(); 
}; 
) 
// 显 示 当 前 已 存储 数据 
function displayCard()( 
alert(" 将 要 刷新 数据 ……"); 
var displayArea = document. getElementById("displayArea"); 
displayArea. innerHTML = ""; 
// 数 据 库 事务 
var transaction = database. transaction( [ "Cards" ]," readonly"); 
var objectStore - transaction. objectStore("Cards"); 
var request = objectStore. openCursor(); 
request.onerror - function(e)( 
alert( request. error); 
H 
request.onsuccess = function(e)( 
var cursor - e.target.result; 
if (cursor){ 
var dog = cursor. value; 
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var newdiv = document.createElement("div"); 

newdiv.setAttribute("class","card"); 

newdiv. innerHTML += "宠物 名 字 : " + dog.petName + "<br />"; 

newdiv. innerHTML += "宠物 种 类 : " + dog.petKind + "<br />"; 

"主人 姓名 : ”+ dog. petOwner + "<br />"; 
" + dog.tel + "<br />"; 


newdiv.innerHTML += 
newdiv.innerHTML += "主人 电话 : 


newdiv. innerHTML += "< button onclick = 'deleteCard(this)' data- petName = '" + 


dog.petName +“" 必 删除 </button>"; 
displayArea. appendChild(newdiv); 
cursor.continue(); 


) 


9.2.2 创建 并 连接 数据 库 


每 当 一 个 本 地 数据 库 应 用 被 打开 时 ,可 能 出 现 两 种 情况 : 一 种 是 首次 打开 这 个 应 用 , 数 
据 库 并 未 进行 创建 ,这 时 需要 做 的 是 创建 这 个 数据 库 ; 另 一 种 情况 是 非 首次 打开 应 用 ,数据 
库 已 经 被 创建 ,这 时 需要 做 的 仅仅 是 连接 数据 库 。 对 于 IndexedDB 来 说 ,应 对 这 两 种 情况 ， 


只 需 在 页 面 加 载 完 成 后 调用 一 个 open() 方 法 即 可 。 
// 将 database 作为 全 局 变量 ,可 以 在 各 处 被 访问 


var database; 
window. onload = function()( 
// 数 据 库 的 创建 与 连接 


var request = window. indexedDB. open("Card",1); 
request. onsuccess = function(e)( 
alert(" 成 功 创建 或 连接 数据 库 "); 
database = request. result; 
// 显 示 当 前 已 存储 数据 
displayCard(); 
}; 
request.onerror = function (e) ( 
alert(request. error); 
}; 
request. onupgradeneeded = function(e){ 
alert(" 将 要 初始 化 数据 库 或 更 新 "); 
var db = request. result; 
var objectStore = db.createObjectStore("Cards", { keyPath: "petName" }); 


h 
h 


这 里 为 页 面 添 加 了 一 个 onload 事件 处 理 函 数 ,在 页 面 加 载 完成 之 后 执行 


. 又 由 于 


IndexedDB 是 异步 的 ,所 以 所 有 关于 数据 库 的 操作 都 是 基于 请 求 和 收 到 反馈 的 机 制 进行 的 。 
通过 window 对 象 的 indexedDB 对 象 调用 open() 方 法 ,返回 一 个 请 求 对 象 ,命名 为 request. 
我 们 需要 利用 这 个 对 象 来 接收 来 自 数据 库 的 反馈 以 实现 异步 。 在 调用 open() 方 法 时 ,传人 
的 两 个 参数 分 别 是 所 要 创建 的 数据 库 名 称 以 及 数据 库 的 版 本 号 ,数据 库 在 首次 创建 时 版 本 


应 为 1。 之 后 , 当 open() 方 法 调用 后 ,浏览 器 就 会 向 数据 库 传达 这 次 请 求 了 ,应 时 刻 监听 反 
馈 来 获知 数据 库 操作 结果 ,从 而 进一步 地 操作 。 

对 于 请 求 对 象 的 事件 监听 ,一 般 都 要 有 两 个 : onsuccess 事件 和 onerror 事件 。 
onsuccess 事件 在 数据 库 操作 成 功 实现 后 被 触发 ,在 这 之 后 一 般 进 行 操作 成 功 提 醒 或 是 继续 
进行 其 他 操作 。 而 onerror 事件 在 数据 库 操 作 失 败 后 触发 ,可 以 通过 请 求 对象 的 error 属性 
来 查看 具体 的 错误 信息 。 对 于 数据 库 的 连接 与 创建 来 说 ,还 需要 有 一 个 onupgradeneeded 
事件 。 这 个 事件 在 所 请 求 的 数据 库 版 本 高 于 已 存在 的 数据 库 版 本 时 触发 。 当 然 , 在 所 请 求 
的 数据 库 根 本 不 存在 时 ,也 会 被 触发 。 这 种 情况 下 open() 函 数 就 会 新 建 一 个 数据 库 。 

对 于 上 述 实 例 , 在 第 一 次 运行 页 面 时 ,由 于 先前 没有 创建 过 数据 库 , 所 以 会 先 触 发 
onupgradeneeded 事件 ,在 这 个 事件 处 理 函 数 中 , 先 通过 请 求 对 象 的 result 属性 获取 到 所 请 
求 的 数据 库 , 然 后 再 调用 createObjectStore ( ) 方法 新 创建 一 个 对 象 存储 仓库 (Object 
Store) ,或 者 说 是 一 个 数据 表 ,来 统一 存储 和 管理 一 组 数据 。 该 方法 需要 传人 两 个 参数 以 便 
完成 创建 。 第 一 个 参数 是 这 个 对 象 数 据 表 的 名 称 , 以 便 后 续 的 访问 与 查询 。 第 二 个 参数 是 
数据 表 的 关键 字 路 径 (Key Path), 它 是 这 组 数据 对 象 的 属性 之 一 ,在 查询 过 程 中 ， 
IndexedDB 通过 关键 字 路 径 来 确定 所 查找 的 数据 对 象 并 返回 ,可 以 理解 为 它 是 每 条 存储 数 
据 的 “身份 证 ”, 用 来 区 别 于 其 他 的 数据 对 象 。 在 这 个 实例 中 ,需要 统一 存储 管理 的 就 是 若干 
宠物 名 牌 对 象 。 数 据 表 的 名 称 为 Cards ,关键 字 路 径 为 petrName。 在 执行 onupgradeneeded 
事件 函数 之 后 ,就 会 继续 触发 onsuccess 事件 表示 open ) 方 法 执行 正确 ,数据 库 连 接 成 功 ， 
然后 通过 自 定义 的 变量 database 来 获取 到 返回 的 数据 库 对 象 。 这 里 自 定义 的 database 变 
量 是 一 个 全 局 变量 ,这 样 经 过 一 次 连接 就 可 以 在 代码 的 各 处 自由 地 使 用 数据 库 了 。 之 后 再 
运行 页 面 ,就 会 直接 连接 数据 库 成 功 并 触发 onsuccess 事件 ,从 而 省 去 创建 数据 库 和 其 中 数 
据 表 的 过 程 。 

进入 调试 界面 中 的 IndexedDB 选项 , 便 可 以 看 到 实例 中 所 创建 的 数据 库 , 其 中 包括 数 
据 库 名 称 与 版 本 号 信息 ,如 图 9. 19 所 示 。 
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9.2.3 添加 数据 


由 于 IndexedDB 是 基于 事务 (transaction) 的 ,所 以 每 一 次 的 数据 操作 都 是 以 事务 为 单 
位 的 。 所谓“ 事务 ”, 对 数据 库 来 说 是 一 组 不 可 分 割 的 多 个 操作 , 若 执 行 必须 将 每 个 子 操作 都 
执行 ; 否则 ,就 要 每 个 操作 都 撤销 从 而 恢复 到 事务 开始 时 的 状态 。 对 于 IndexedDB 来 说 , 完 
成 一 次 事务 ,需要 图 9. 20 所 示 的 4 个 逻辑 步骤 。 

(1) 创建 事务 。 

(2) 获取 数据 表 。 

(3) 选择 操作 。 

(4) 等 待 处 理 结果 。 





























(1) 创建 事务 var transaction-database.transaction(["Cards"],"readwrite"); 
Y 
(2) 获取 数据 表 var objectStore-transaction.objectStore("Cards"); 
Y 
(3) 选择 操作 var request-objectStore.put(dog); 
1 
request.onsuccess=function(e){...}; 
(4) 等 待 处 理 结果 | request.onerror=function(e){...}; 








9.20 事务 的 流程 
结合 图 9. 20, 以 及 实例 中 保存 数据 部 分 的 代码 ,可 详细 分 析 。 


function saveInfo()( 
// 获 取 输 入 框 数 据 
var petName = document.getElementById("petName"); 
var petKind = document.getElementById("petKind"); 
var petOwner = document. getElementById("petOwner"); 
var tel = document.getElementById("tel"); 
// 创 建 对 象 
var dog = new dogCard(petName. value, petKind. value, petOwner. value, tel. value); 
// 数 据 库 事务 
var transaction = database. transaction(["Cards"],"readwrite"); 
var objectStore = transaction. objectStore("Cards"); 
var request = objectStore. put(dog) ; 
request.onerror = function(e)( 
alert(request. error); 
}; 
request. onsuccess = function(e){ 


alert(" 成 功 添加 狗 子 信息 !"); 


displayCard(); 
) 


当 完 成 一 次 宠物 名 牌 信息 录入 后 , 单 击 “ 保 存 ” 按 钮 就 会 触发 按钮 onclick 事件 的 处 理 函 
数 saveInfo()。 在 这 个 函数 中 ,首先 获取 输入 框 ,并 根据 输入 框 内 所 填 内 容 进行 对 象 
dogCard 的 创建 ,然后 返回 一 个 根据 当前 表单 输入 内 容 所 创建 的 对 象 实 例 dog, 这 个 对 象 就 
是 接 下 来 所 需要 导入 数据 表 的 对 象 。 

然后 就 要 以 事务 为 单位 进行 数据 库 操 作 了 。 第 一 步 ,创建 事 务 对 象 ,通过 已 获取 的 数据 
库 对 象 的 transaction() 方 法 进行 创建 ,在 此 传人 两 个 参数 。 第 一 个 参数 指定 本 次 事务 将 涉 
及 的 数据 表 , 在 此 以 “["Cards"]” 这 种 形式 编写 ,代表 了 这 是 一 个 字符 串 数组 ,可 以 指定 多 个 
数据 表 。 如 果 此 次 事务 只 涉及 一 个 数据 表 , 可 仅 以 单个 字符 串 的 形式 编写 。 第 二 个 参数 是 
此 次 数据 库 事务 操作 的 模式 , 若 不 设置 此 项 参数 , 则 默认 为 readonly, 即 对 数据 表 内 的 数据 
仅 限 于 读 操 作 。 在 此 处 写作 readwrite, 表 示 既 可 读 也 可 写 。 第 二 步 , 通 过 事务 对 象 的 
objectStore( ) 方 法 获取 将 要 进行 操作 的 数据 表 , 该 方法 所 需 输入 的 参数 为 数据 表 的 名 称 。 
第 三 步 , 通 过 上 一 步 所 获取 的 数据 表 对 象 进 行 具体 的 操作 。 这 里 要 存 人 之 前 所 构造 的 dog 
对 象 。 调 用 put() 方 法 ,传人 dog 对 象 。 之 后 此 次 事务 便 作为 一 次 请 求 交 由 数据 库 做 异步 
处 理 。 第 四 步 ,为 这 次 请 求 对 象 编写 onsuccess 和 onerror 的 事件 处 理 函 数 ,以 对 数据 库 执 
行 的 结果 进行 反馈 。 至 此 便 完 成 了 一 个 数据 对 象 的 添加 ,同时 也 详细 了 解 了 IndexedDB 的 
一 次 事务 的 大 概 流程 。 在 之 后 的 查询 所 有 数据 删除 数据 查询 单条 数据 等 数据 库 操作 都 遵 
循 这 一 流程 , 故 不 再 详细 讲解 。 

在 完成 数据 的 输入 之 后 , 单 击 调试 界面 的 IndexedDB 选项 , 便 可 以 看 到 在 这 个 数据 库 
中 新 建 的 数据 表 以 及 数据 表 中 的 数据 对 象 , 同 时 也 可 以 查看 每 一 个 数据 对 象 的 详细 情况 ,如 
图 9. 21 所 示 。 
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9.2.4 未 个 查询 所 有 数据 


添加 数据 后 ,就 需要 查看 并 访问 到 数据 ,这 样 才能 继续 下 一 个 业务 逻辑 。 在 这 个 宠物 名 
牌 的 实例 中 ,每 当 页 面 载 人 时 、 插 入 数据 后 删除 数据 后 ,都 需要 查询 一 遍 所 有 数据 并 将 查询 
结果 显示 到 页 面 上 。 这 时 需要 一 种 方式 来 访问 所 有 数据 。 在 IndexedDB 中 ,利用 游标 来 完 
成 这 项 工作 。 请 看 实例 中 的 displayCard() 函数 部 分 。 


// 显 示 当 前 已 存储 数据 
function displayCard(){ 
alert(" 将 要 刷新 数据 ……"); 
var displayArea = document. getElementById("displayArea" ); 
displayArea. innerHTML = ""; 
// 数 据 库 事务 
var transaction = database. transaction( [ "Cards" ], "readonly"); 
var objectStore = transaction. objectStore("Cards"); 
var request = objectStore. openCursor(); 
request. onerror = function(e)( 
alert(request. error); 
1 
request.onsuccess = function(e){ 
var cursor = e.target.result; 
if (cursor)( 
var dog = cursor. value; 
var newdiv = document.createElement("div"); 
newdiv. setAttribute("class","card"); 
newdiv. innerHTML += "宠物 名 字 : " + dog.petName + "<br />"; 
newdiv.innerHTML += "宠物 种 类 : " + dog.petKind + "<br />"; 
newdiv.innerHTML += "主人 姓名 : " + dog.petOwner + "<br />"; 
newdiv. innerHTML += "主人 电话 : " + dog.tel + "<br />"; 
newdiv. innerHTML += "< button onclick = 'deleteCard(this)'data- petName = '" + 
dog. petName + "> 删除 </button >"; 
displayArea. appendChild(newdiv); 


cursor.continue(); 


) 


这 个 函数 中 ,同样 需要 通过 事务 流程 来 进行 数据 库 相 关 操 作 。 由 于 查询 数据 的 操作 只 
有 读 而 没有 写 , 故 在 创建 事务 时 只 需 传 人 参数 readonly。 随 后 ,与 之 前 不 同 的 是 ,在 指定 数 
据 表 的 操作 时 ,调用 openCursor( ) 方 法 来 启用 游标 , 它 可 以 追踪 数据 表 当 前 位 置 的 对 象 ,从 
而 可 以 逐个 访问 数据 对 象 ,这 一 过 程 如 图 9. 22 所 示 。 

在 创建 了 一 个 游标 之 后 , 它 会 返回 一 个 请 求 对 象 ,通过 这 个 请 求 对 象 便 可 以 访问 到 游标 
对 象 , 它 指向 当前 位 置 的 数据 对 象 。 所 以 在 onsuccess 事件 处 理 函数 中 ,首先 获取 这 个 请 求 
的 结果 “var cursor— e. target. result;”, 获 取 到 一 个 带 有 值 属 性 的 游标 对 象 变量 cursor, Z 
后 便 可 以 通过 游标 对 象 的 value 属性 来 获取 当前 位 置 的 数据 对 象 " var dog = cursor. 
value;”。 由 于 需要 通过 游标 逐个 访问 每 个 对 象 , 所 以 还 需要 调用 continue() 方 法 来 访问 下 
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cursor cursor.continue() 








图 9.22 游标 


一 个 位 置 的 数据 对 象 , 这 时 就 会 再 发 出 一 个 请 求 , 然 后 监听 onsuccess 事件 ,直到 游标 走 到 
数据 表 中 的 最 后 一 个 数据 对 象 后 再 返回 空 的 游标 为 止 ,借助 一 个 条 件 语句 来 判断 返回 的 游 
标 对 象 是 否 存在 便 可 完成 上 述 过 程 。 至 此 便 通 过 游标 完成 了 对 数据 表 中 的 数据 对 象 的 逐个 
访问 。 


9.2.5 删除 单条 数据 


在 displayCard() 函 数 中 ,除了 逐个 访问 数据 表 中 的 数据 外 ,显示 数据 的 代码 段 里 还 为 
每 一 个 显示 在 页 面 上 的 宠物 名 牌 卡片 动态 地 添加 了 “删除 ”按钮 ,来 执行 删除 功能 。 在 之 前 
我 们 知道 IndexedDB 通过 关键 字 路 径 来 访问 数据 表 中 的 数据 对 象 ,所 以 类 似 地 ,在 删除 数 
据 表 中 的 一 个 数据 对 象 时 ,也 需要 确定 关键 字 路 径 的 值 才 能 找到 所 要 删除 的 对 象 ,之 后 才能 
进行 删除 。 在 该 实例 中 ,我 们 通过 微 数据 来 自 定义 属性 data-petName, 并 将 属性 赋值 为 当 
前 对 象 的 petName 属性 值 , 也 即 是 关键 字 路 径 值 。 


newdiv. innerHTML += "<button onclick = 'deleteCard(this)'data - petName = '" + dog. petName + 
"> 删除 </button >"; 


然后 在 deleteCard O 函数 中 , 传 入 当前 < button > 标签 ,再 通过 getAttribute 获取 到 
data-petName 属性 值 即 可 。 


function deleteCard(element){ 
var petName = element.getAttribute("data - petName"); 
// 数 据 库 事务 
var transaction = database. transaction(["Cards"], "readwrite"); 
var objectStore = transaction. objectStore("Cards"); 
var request = objectStore. delete(petName); 
request. onerror = function(e)( 
alert(request.error); 
H 
request.onsuccess - function(e)( 
alert(petName + "这 条 狗 子 的 信息 已 删除 "); 
// 显 示 当 前 已 存储 数据 
displayCard(); 
H 
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这 样 在 每 次 单 击 * 删 除 ? 按 钮 时 ,页 面 就 可 以 知道 所 要 删除 的 是 哪 一 个 数据 对 象 。 接 下 
来 ,就 可 以 据 此 进行 数据 库 的 事务 了 。 由 于 是 删除 操作 ,在 创建 事务 时 应 当 传人 参数 
readwrite, 表 明 操 作 涉 及 读 和 写 。 与 之 前 的 逻辑 相似 ,这 一 次 调用 的 是 objectStore 对 象 的 
delete 方法 ,并 传人 之 前 所 获取 到 的 当前 被 删除 对 象 的 关键 字 路 径 值 即 可 。 由 此 就 会 向 数 
据 库 发 出 一 个 删除 数据 对 象 的 请 求 , 如 果 能 够 触发 onsuccess 事件 , 则 说 明 数 据 库 删 除 单个 
数据 对 象 的 事务 顺利 完成 。 


9.2.6 查询 单条 数据 


与 删除 单条 数据 的 原理 类 似 , 查 询 单条 数据 的 操作 也 必须 先 获取 所 要 查询 的 数据 对 象 
的 关键 字 路 径 , 再 通过 关键 字 路 径 来 返回 所 查询 的 数据 对 象 。 由 于 在 先前 的 宠物 名 牌 录入 
页 面 内 无 法 展示 查询 单条 数据 的 功能 ,所 以 需要 在 已 存 有 数据 对 象 的 数据 库 的 基础 上 ,再 编 
写 一 个 页 面 来 实现 查询 单条 数据 的 功能 。 这 个 实例 所 实现 的 功能 是 先 在 输入 框 中 输入 所 查 
询 的 数据 对 象 的 关键 字 路 径 , 然 后 单 击 “ 搜 索 ” 按 钮 。 当 成 功 查询 到 这 个 数据 对 象 后 ,予以 显 
示 。 当 未 能 找到 数据 对 象 时 ,予以 反馈 。 这 个 单独 的 查找 页 面 与 之 前 存储 信息 的 页 面 在 样 
式 与 展示 相关 函数 上 几乎 一 致 , 仅 有 少量 改动 。 该 实例 在 浏览 器 中 的 展示 效果 如 图 9. 23 和 
图 9. 24 所 示 。 








a | file///F./wamp/www/Web?&20Storage/searchPet.html a *| son: 
7 = 


搜索 宠物 一 一 此 网 页 显示 : 
宠物 名 字 : 找到 了 ! ! 
[m=] 


宠物 名 字 : 橡皮 
宠物 种 类 : LER 








主人 姓名 : 一 个 人 的 名 字 
主人 电话 : 32456 





9.23 IndexedDB 查询 单条 数据 成 功 
文件 名 : 查询 单条 数据 . html 


<!DOCTYPE HTML > 
< htnl lang = "en- US"> 
<head> 
< meta charset = "UTF — 8"> 
<title > 搜索 宠物 </title> 


< style> 





wx é on 





C Q file///F/wamp/www/Web9e20Storage/searchPet.html 





搜索 宠物 一 一 此 网 页 显示 : 
宠物 名 字 : 对 不 起 , EHA. . 


[ez] 





x 





[e] 








9.24 IndexedDB 查询 单条 数据 失败 


fieldset{ 
width:300px; 
} 
input{ 
float:right; 
} 
.iten( 
padding - top:5px; 
padding - bottom: 7px; 
) 
.card{ 
margin:20px 5px 10px 10px; 
float:left; 
border:1px solid black; 
padding:10px 10px 10px 10px; 
line- height :30px; 
border - radius:10px 10px 10px 10px; 
) 
</style> 
< script src = "searchPet. js"></script > 
</head> 
<body> 
<fieldset > 
< legend > 搜索 宠物 </legend> 
< div class = "item"> 
宠物 名 字 : 
< input type = "text" id= "petName"/> 
</div> 
< button onclick = "searchInfo()"»18 #2</button > 
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</fieldset > 
< div id= "displayArea"> 
</div> 

</body> 

«/htnl > 


文件 名 : searchPet. js 


var database; 
window. onload = function(){ 
var request = window. indexedDB. open("Card",1); 
var displayArea = document. getElementById("displayArea"); 
var petName = document.getElementById("petName"); 
request.onsuccess = function(e)( 
alert(" 成 功 创建 或 连接 数据 库 "); 
database = request. result; 
J 


request.onerror = function (e) ( 
alert(request.error + " occurred."); 


); 


request.onupgradeneeded = function(e)( 
alert(" 将 要 初始 化 数据 库 或 进行 更 新 ") ; 
var db = request. result; 
1; 
J 


function searchInfo()( 
if (petName. value)( 
showResult(petName. value); 
}else{ 
alert(" 请 输入 要 查询 的 狗 子 名 字 "); 


I 
function showResult(petName)( 
var transaction = database. transaction(["Cards"], "readonly"); 
var objectStore - transaction. objectStore("Cards"); 
var request = objectStore.get(petName); 
request. onerror = function(e)( 
alert(request.error + " occurred--"); 
1; 
request. onsuccess = function(e)( 
displayArea. innerHTML = ""; 
var dog = request. result; 
if (dog){ 
alert(" S S] T 11") 
var newdiv = document. createElement("div"); 
newdiv.setAttribute("class","card"); 
newdiv.innerHTML += "宠物 名 字 : " + dog.petName + "<br />"; 
newdiv.innerHTML += "宠物 种 类 : " + dog.petKind + "<br />"; 


newdiv.innerHTML += "主人 姓名 : " + dog.petOwner + "<br />"; 
newdiv. innerHTML += "主人 电话 : " + dog.tel + "<br />"; 
displayArea. appendChild(newdiv); 

Jelse( 
alert(" 对 不 起 , 查 无 此 狗 …… i 

) 


) 


在 这 个 实例 中 ,我 们 为 “搜索 ”按钮 添加 了 onclick 事件 的 处 理 函 数 searchInfo O ,并 获 
取 输 入 框 中 的 内 容 , 在 该 输入 不 为 空 的 情况 下 ,作为 参数 传 给 showResult() 方 法 并 执行 。 
在 showResult() 方 法 中 ,同样 依循 之 前 的 流程 创建 事务 。 由 于 仅 是 查询 单条 数据 ,所 以 在 
创建 事务 时 输入 参数 readonly。 然 后 获取 数据 表 对 象 ,与 调用 delete() 方 法 类 似 ,此 时 调用 
get( ) 方 法 ,并 传人 所 要 查询 对 象 的 关键 字 路 径 , 随后 就 会 向 数据 库 发 出 请 求 了 。 在 
onsuccess 事件 处 理 函 数 中 ,通过 返回 的 请 求 对 象 的 result 属性 就 可 以 访问 到 所 查询 的 对 
象 。 在 这 个 实例 中 ,根据 所 返回 的 数据 对 象 , 就 可 以 访问 到 对 象 的 各 属性 值 并 予以 显示 , 形 
成 了 查询 的 结果 。 


9.3 >*= 是 


1. Web 应 用 中 为 什么 需要 本 地 存储 ? 

2. HTML5 支持 哪 几 种 本 地 存储 的 解决 方式 ? 

3. 什么 是 Web Storage? 它 和 以 前 广 为 使 用 的 cookie 相 比 有 何 异 同 ? 请 简要 分 析 并 比较 。 
4. Web Storage 中 的 Local Storage 和 Session Storage 有 何 区 别 ? 

5. Web Storage 的 数据 保存 格式 是 怎样 的 ? 在 处 理 数 字 和 日 期 等 类 型 数据 时 应 注意 
? 
6 


. 使 用 Web Storage 时 ,应 该 如 何 对 JavaScript 对 象 进行 存 取 ? 

7. 仿照 本 章 中 的 宠物 名 牌 实例 ,利用 Web Storage, 设 计 一 个 个 人 物品 清单 类 应 用 ,要 
求 能 够 通过 对 象 的 方式 向 应 用 存 入 个 人 物品 相关 数据 ,如 名 称 、 价 格 、 日 期 等 信息 ,并 且 能 够 
自如 地 进行 查询 和 删除 操作 。 

8. 什么 是 IndexedDB? 它 在 HTML5 中 有 何 作用 ? 

9. IndexedDB 具有 怎样 的 特点 ? 

10. 什么 是 关系 型 数据 库 ? 什么 是 非 关系 型 数据 库 ? IndexedDB 属于 哪 一 类 ? 试 上 网 
检索 资料 ,比较 关系 型 数据 库 与 非 关系 型 数据 库 的 异同 。 

11. 如 何 理解 IndexedDB 是 基于 事务 的 ? 它 的 每 一 个 数据 库 操作 都 需要 经 过 大 致 怎样 
的 流程 ? 

12. 在 IndexedDB 中 如 何 实现 创建 并 连接 数据 库 ? 又 是 如 何 创建 数据 表 的 ? 

13. 如 何 通过 浏览 器 对 Web Storage 和 IndexedDB 相关 应 用 进行 调试 ? 

14. 试 通过 本 地 数据 库 IndexedDB, 完 成 第 7 题 的 个 人 物品 清单 应 用 。 
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许多 应 用 场景 都 涉及 文件 的 选择 上 传 , 比 如 提交 一 个 文档 形式 的 表格 或 是 上 传 社交 网 
站 上 的 个 人 头像 等 。 一 般 借助 < input > 标签 元 素来 完成 小 段 文 本 的 上 传 (简单 的 个 人 信息 、 
密码 等 )。 同 时 ,也 可 以 用 < input > 标签 来 上 传 文件 。 接 下 来 将 要 介绍 的 文件 API, 能 够 帮 
助 我 们 通过 JavaScript 对 现 有 已 上 传 的 文件 进行 读 取 和 操作 ,由 于 目前 这 部 分 功能 的 标准 
制定 和 各 浏览 器 的 支持 还 在 进行 中 ,对 于 更 为 复杂 的 文件 操作 ,譬如 通过 JavaScript 修改 和 
保存 文件 等 方法 不 能 借助 标准 的 接口 实现 ,只 能 通过 其 他 方法 间接 实现 。 目 前 关于 文件 相 
K API 更 多 的 应 用 在 于 提供 一 个 更 为 友好 的 上 传 界面 一 一 设置 文件 大 小 限制 ,获取 文件 的 
缩 略 图 ,构造 拖 忠 上 传 等 ,所 以 本 童 的 内 容 与 实例 偏重 于 此 。 


10.1 通过 input 标签 上 传 文件 


在 HTML 页 面 中 ,只 需要 在 < input > 标签 内 将 type 属性 设置 为 file, 就 可 以 进行 文件 
的 选择 。 选 择 文件 的 这 一 过 程 相当 于 将 文件 暂 存在 浏览 器 中 ,之 后 再 将 它 上 传 到 Web 服务 
器 端 。 下 面 这 个 实例 简单 实现 了 选择 文件 上 传 这 一 功能 ,其 在 浏览 器 中 的 展示 效果 如 
图 10.1 所 示 。 

文件 名 : 通过 input 标签 选择 文件 上 传 . html 


<! DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF - 8"> 
«title» input 上 传 文件 组 件 </title> 
</head> 
<body> 
< input type = "file" /> 
</body> 
</html> 


除了 直接 单 击 控件 选择 文件 外 ,很 多 浏览 器 都 支持 将 指定 文件 拖 忠 到 控件 区 域 完 成 选 
择 ( 控 件 区 域 即 是 图 10. 1 中 带 有 边框 的 区 域 ) 的 操作 ,如 图 10. 2 所 示 。 这 也 为 制作 自 定义 
的 、 界 面 更 为 友好 的 拖 忠 上 传 控件 成 为 可 能 ,有 兴趣 的 读者 可 以 结合 第 6 章 关 于 拖 放 的 内 容 
来 实现 。 


D input 上 传 文件 组 件 
G ° file:///C:/Users/SONY/Desktop/HTML5/ 文 件 /input 标 签 文件 + 图 *| son 











选择 文件 | doge jpg 











图 10.1 通过 input 标签 上 传 文件 
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10.2 读 取 文件 基本 信息 


对 于 一 个 上 传 格式 为 文件 的 < input > 元 素 , 可 以 读 取 到 文件 的 基本 信息 ,以 便 对 上 传 过 
程 进行 了 解 与 控制 。 例 如 ,为 上 传 格式 增加 限制 ,为 上 传 文件 的 大 小 添加 控制 等 。 在 下 面 这 
个 实例 中 ,我 们 对 所 选择 的 上 传 文件 进行 文件 基本 信息 的 显示 ,其 在 浏览 器 中 的 展示 效果 如 
10.3 所 示 。 











文件 大 小 : 2777bytes 
文件 类 型 : image/jpeg 





图 10.3 文件 基本 信息 显示 
文件 名 : 读 取 文 件 基 本 信息 . html 


<! DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF - 8"> 
<title> input 上 传 文件 组 件 </title> 
<style> 
.item{ 
margin:20px 5px 10px 10px; 
float:left; 
border:lpx solid black; 
padding:10px 10px 10px 10px; 
line- height :30px; 
border - radius:10px 10px 10px 10px; 
} 
</style> 


</head> 
< body> 
< input type = "file" id= "fileInput" onchange = "processFile(this.files)"/» 
« div id= "displayArea"></div > 
«script» 
function processFile(files)( 
var file = files[0]; 
var displayArea = document. getElementById("displayArea"); 
var newdiv = document.createElement("div"); 
newdiv.setAttribute("class"," item"); 
newdiv. innerHTML = "文件 名 : ”+ file.name + "<br />" + "文件 大 小 : " + file. 
size + "bytes"” + "<br /»" + "文件 类 型 : " + file.type; 
displayArea. appendChild(newdiv); 
) 
</script> 
</body> 
</html> 
在 代码 中 ,我 们 为 文件 < input > 上 传 控件 添加 onchange 事件 处 理 函数 , 它 在 用 户 进行 
文件 选择 后 触发 ,并 传人 当前 文件 上 传 对 象 的 files 属性 。files 属性 是 一 个 包含 已 选择 文件 
的 文件 列表 。 由 于 当前 <input > 内 并 没有 设置 多 文件 上 传 属性 ,所 以 对 属性 files 来 说 ,这 个 
文件 列表 长 度 为 1, 仅 有 一 个 文件 , 故 通过 files[0] 获 取 到 已 选择 的 文件 对 象 。 对 于 文件 对 
象 而 言 ,可 以 对 其 文件 名 、 文 件 大 小 以 及 文件 类 型 等 属性 进行 访问 。 
name 属性 为 当前 文件 对 象 的 文件 名 ,size 属性 为 当前 文件 对 象 的 文件 大 小 ,单位 为 字 
节 (Byte) 。type 属性 为 当前 文件 的 MIME(CMultipurpose Internet Mail Extensions) 类 型 。 
在 实例 中 ,我 们 将 这 些 信息 添加 到 一 个 < div > 元 素 中 ,并 在 页 面 上 显示 。 对 于 显示 的 具体 样 
式 , 在 < style > 标签 内 进行 了 定义 。 可 以 看 到 ,实例 中 所 选择 的 文件 名 称 为 doge. jpg, 大 小 
为 2777B, 并 且 是 一 个 图 片 类 型 数据 ,格式 为 jpeg(image/jpeg) 。 


10.3 BEX input 标签 样式 


虽然 所 有 浏览 器 都 支持 文件 格式 的 < input > 标签 的 控件 ,但 是 这 些 控 件 具体 的 样式 在 
各 个 浏览 器 的 显示 效果 各 有 不 同 。 如 果 想 要 构建 一 个 独特 风格 的 Web 应 用 界面 ,各 个 浏览 
器 的 默认 样式 显然 是 不 能 满足 需求 的 ,所 以 需要 一 些 手段 能 够 重新 定义 文件 上 传 控件 的 
样式 。 

构建 自 定义 的 文件 上 传 控件 方法 并 不 唯一 ,这 里 介绍 一 种 常用 的 方式 ,即使 用 < span > 
或 < label > 标签 来 “代替 ”页 面 中 的 < input > 标签 。 这 里 的 “代替 ”并 不 是 完全 地 取代 ,而 是 把 
< input > 标签 隐藏 起 来 ,让 < span > 标签 负责 显示 ,而 文件 上 传 格式 的 < input > 标签 则 负责 
行使 文件 选择 上 传 的 功能 。 这 个 实例 在 浏览 器 中 的 展示 效果 如 图 10. 4 所 示 。 

文件 名 : 自 定义 input 标签 样式 . html 

«! DOCTYPE HTML > 


<html lang = "en- US"> 
<head> 


ow 
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10.4” 自 定义 上 传 控件 


<meta charset = "UTF - 8"> 
<title> 自 定义 上 传 控件 </title> 
< style> 
# fileInput( 
display:none; 
) 
. fileUpload( 
width:300px; 
border - style: solid; 
border- color: #2BD1EB; 
) 
#  browse( 
background- color: # BFC9CA; 


) 
* fileName( 
padding - left:60px; 
) 
</style> 
</head> 
< body> 
< div class = "fileUpload" onclick = "clickTheInput()"» 
< input type = "file" id= "fileInput" onchange = "processFile(this.files)"/» 
< span id = "browse"> 选 择 文件 </span> 
< span id = "fileName"></span> 
</div> 


< script» 

function clickTheInput()( 
var input = document.getElementById("fileInput"); 
input.click(); 

) 

function processFile(files)( 
var file = files[0]; 
var label = document.getElementById("fileName"); 
label.innerHTML - file.name; 

) 


</script> 
</body> 
</html> 


上 面 这 个 实例 自 定义 的 效果 虽然 不 够 美观 ,还 不 如 浏览 器 默认 样式 好 看 ,但 这 样 的 编写 
方式 给 了 开发 者 更 大 的 自由 来 决定 文件 上 传 控 件 的 具体 展示 样式 。 

在 页 面 内 ,可 以 看 到 原本 的 < input > 标签 被 多 个 标签 共同 代替 。 一 个 < div > 元 素 内 有 
三 个 标签 ,分 别 是 一 个 < input > 和 两 个 < span > 标签 。 对 于 < input > 标签 ,通过 设置 其 CSS 
样式 为 “display: none; "来 将 原来 默认 的 文件 上 传 控 件 隐藏 起 来 ,而 为 了 像 原 来 一 样 使 用 
这 个 控件 ,可 通过 包 庄 在 < input > 标签 外 的 < div > 标签 将 单 击 事件 传递 给 它 , 从 而 实现 单 
击 < div> 元 素 呈 现 相 同 的 选择 文件 效果 。 所 以 为 < div > 添加 单 击 事件 处 理 函 数 
clickTheInput() 。 

function clickTheInput()( 

var input = document. getElementById("fileInput"); 


input.click(); 
j; 


之 后 的 两 个 < span > 标签 作为 显示 作用 : 第 一 个 < span > 标签 内 显示 “选择 文件 ”, 用 来 
提示 用 户 选择 文件 进行 上 传 ; 第 二 个 < span > 标签 则 通过 < input > 标签 的 onchange 事件 处 
HLX processFile() 来 动态 的 读 取 所 选择 文件 的 文件 名 ,并 显示 。 

function processFile(files)( 

var file = files[0]; 
var label = document. getElementById("fileName"); 


label. innerHTML = file. name; 
} 


至 此 ,就 将 浏览 器 的 默认 风格 样式 的 文件 < input > 元 素 改造 成 了 自 定义 形式 ,可 以 通过 
设 定 < span > 标签 与 < div > 标签 的 样式 ,来 自 定义 文件 上 传 控件 。 这 样 的 自 定义 可 以 让 开发 
者 更 灵活 地 设 定 样式 。 需 要 注意 的 是 , 自 定义 的 方式 并 不 唯一 ,上 述 实例 只 是 其 中 一 种 方 
式 , 关 键 在 于 原生 < input > 标签 的 隐藏 ,以 及 原生 < input > 标签 单 击 事件 处 理 的 传递 ,这 样 
才能 像 模 像样 地 模仿 出 浏览 器 默认 选择 文件 上 传 控件 的 样式 与 功能 ,并 在 此 基础 上 增添 一 
些 独 特 的 设 定 。 
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10.4 多 文件 选取 


对 于 文件 格式 的 < input > 标签 ,可 以 通过 设置 其 属性 multiple 来 实现 多 文件 的 上 传 。 

< input type = "file" id= "fileInput" onchange = "processFile(this. files)" multiple/> 

同样 在 多 文件 的 选择 后 ,也 可 以 进行 文件 基本 信息 的 读 取 以 及 其 他 关于 文件 的 操作 。 
下 面 通过 一 个 实例 来 具体 了 解 文件 上 传 控件 的 多 文件 选取 实现 。 这 个 实例 建立 在 10.2 35 
实例 的 基础 上 ,通过 for 循环 来 访问 每 一 个 文件 对 象 。 该 实例 的 文件 选取 过 程 以 及 在 浏览 
器 中 的 展示 效果 如 图 10. 5 和 图 10.6 所 示 。 


-— 


- 








5 迅雷 下 载 








文件 名 (N): “dogejpg "Hello bt" "风车 .png” 











图 10.5 多 文件 选取 
文件 名 : 多 文件 上 传 . html 


<! DOCTYPE HTML > 
< html lang = "en- US"> 
<head> 
< meta charset = "UTF — 8"> 
«title» input 上 传 文件 组 件 </title> 
«style» 
.iten( 
margin:20px 5px 10px 10px; 
float:left; 
border:lpx solid black; 
padding: 10px 10px 10px 10px; 
line- height :30px; 
border - radius:10px 10px 10px 10px; 
} 
</style> 


</head> 
<body> 
< input type = "file" id= "fileInput" onchange = "processFile(this. files)" multiple/> 
< div id= "displayArea"»«/div» 
< script» 
function processFile(files)( 
// 在 每 次 选取 后 ,显示 区 域 清 空 
var displayArea = document. getElementById("displayArea"); 
displayArea. innerHTML = ""; 
for (var i-0;i« files. length; i++){ 
var file - files[i]; 
var newdiv = document. createElement("div"); 
newdiv.setAttribute("class"," item"); 
newdiv.innerHTML = "文件 名 : ”+ file.name + "<br />" + "文件 大 小 : " + 
file.size + "bytes" + "<br />" + "文件 类 型 : " + file.type; 
displayArea. appendChild(newdiv); 


) 
) 
«/script» 
</body> 
</html> 





€ > Q |O file///C/Users/SONY/Desktop/HTMLS/xr&&/inputix&xr&: 图 t| $ 加 


[isses | xet. 











文件 名 : dogejpg 文件 名 : Hello.txt 文件 名 : 风车 .png 
文件 大 小 : 2777bytes | | 文件 大 小 : 12bytes | | 文件 大 小 : 2950bytes 
文件 类 型 ; image/jpeg | | 文件 类 型 : text/plain | | 文件 类 型 : image/png 








图 10.6 多 文件 选取 结果 


首先 对 于 多 个 文件 的 选择 方式 ,可 以 像 实例 运行 效果 展示 的 这 样 , 如 图 10. 5 所 示 ,通过 00s 
鼠标 单 击 划 出 矩形 将 所 需 文件 包括 在 范围 内 。 也 可 以 通过 按 住 键盘 的 Ctrl 键 ,进行 持续 地 | 第 


选择 。 除 了 单 击 上 传 控 件 进行 选择 文件 外 ,与 单个 文件 拖 拐 上 传 类 似 的 ,多 个 文件 也 可 以 从 | 10 
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文件 夹 直 接 拖 忠 到 控件 区 域内 ,完成 多 个 文件 的 选择 ,如 图 10.7 所 示 。 





























10.7 多 文件 拖 忠 选取 


再 来 关注 代码 段 ,由 10.2 节 的 介绍 可 以 知道 ,每 编写 一 个 文件 格式 的 < input > 标签 都 
会 创建 一 个 文件 上 传 对 象 , 当 选择 文件 完成 之 后 就 会 触发 onchange 事件 ,执行 自行 编写 的 
处 理 函 数 processFile() ,并 将 文件 上 传 对 象 的 files 属性 ( 即 一 个 包含 所 有 已 选择 文件 的 文 
件 列表 ) 作 为 参数 传人 。 本 节 的 实例 与 之 前 不 同 的 是 ,这 一 次 是 选取 多 个 文件 ,这 样 就 使 得 
文件 列表 的 长 度 大 于 或 等 于 1。 于 是 我 们 便 使 用 索引 的 方式 借助 for 循环 访问 文件 列表 中 
的 每 一 个 文件 对 象 , 然 后 将 文件 基本 信息 显示 到 页 面 中 。 


10.5 读 取 文件 内 容 


在 HTML5 的 文件 API 标准 中 ,不 仅 定义 了 文件 基本 信息 读 取 的 方法 ,同时 也 定义 了 
文件 内 容 的 读 取 , 虽 然 可 能 它 并 不 如 其 他 语言 中 的 读 取 功 能 强大 ,但 是 可 以 满足 一 些 基本 的 
应 用 场景 。 下 面 分 别 讲解 文本 内 容 的 读 取 以 及 图 片 内 容 的 读 取 方 式 。 


10.5.1 读 取 文 本 内 容 


下 面 这 个 实例 将 实现 使 用 文件 格式 的 < input > 标签 选取 一 个 文件 ,并 将 这 个 所 获取 的 
文件 交 给 JavaScript 处 理 。 在 这 里 我 们 来 读 取 文本 里 的 内 容 。 该 实例 在 浏览 器 中 的 展示 效 
果 如 图 10.8 所 示 。 

文件 名 : 读 取 文 本 内 容 . html 


<! DOCTYPE HTML» 
<html lang = "en- US"> 


<head> 
< meta charset = "UTF - 8"> 
<title> 读 取 文 本 内 容 </title> 
</head> 
<body> 
< input type = "file" id= "fileInput" onchange = "processFile(this.files)"/> 
< div id= "displayArea"» 
</div> 
< script > 
function processFile(files)( 
var file - files[0]; 
// 创 建 一 个 文件 读 取 对 象 
var reader = new FileReader(); 
reader. readAsText(file); 
reader. onload = function(e)( 
var displayArea = document. getElementById("displayArea"); 
displayArea. innerHTML = e.target. result; 


} 
} 
</script> 
</body> 
</html> 

















选择 文件 | Hello txt 
|| Hello World! Welcome to HTMLS... 











| 259 | 


10.8 文本 内 容 的 读 取 


在 这 段 代码 中 ,同样 还 是 在 文件 选取 完毕 触发 onchange 事件 ,获取 所 上 传 的 文件 对 象 。 


然后 创建 一 个 FileReader 对 象 ,这 个 对 象 可 以 异步 地 读 取 在 用 户 计算 机 上 的 文件 (或 原始 | 10 
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数据 缓冲 区 ) 的 内 容 。 之 后 调用 这 个 FileReader 对 象 的 readAsText() 方 法 ,并 将 之 前 所 获 
取 的 文件 对 象 作为 参数 传人 ,这 样 便 可 以 读 取 文 件 内 容 。 由 于 读 取 文件 耗费 相对 较 长 的 时 
Ti] ,是 一 个 异步 的 操作 ,所 以 需要 为 这 个 FileReader 对 象 实例 设置 一 个 onload 事件 , 当 文 件 
读 取 完毕 触发 ,并 传人 事件 对 象 ,将 结果 显示 到 HTML 页 面 内 。 这 里 选取 了 一 个 预先 写 好 
的 文本 文件 ,并 将 其 内 容 显示 到 HTML 页 面 内 。 

读 取 文件 的 内 容 后 ,其 实 就 可 以 应 用 到 一 些 其 他 的 场景 中 ,比如 可 以 在 客户 端 将 文件 内 
容 进 行 过 滤 或 预 处 理 或 是 批量 地 导入 数据 进行 本 地 处 理 等 。 下 面 结合 第 9 章 的 内 容 , 将 文 
本 里 的 内 容 批量 地 导入 Web Storage 中 。 仍 然 沿 用 9. 1 节 自 定义 的 宠物 名 牌 对 象 ,并 通过 
JSON 进行 对 象 的 存储 。 如 下 是 需要 导入 的 文本 信息 以 及 实例 代码 ,该 实例 在 浏览 器 中 的 
展示 效果 如 图 10. 9 所 示 , 导 入 成 功 后 可 以 通过 浏览 器 调试 界面 观察 到 已 导入 的 Web 
Storage 数据 ,如 图 10. 10 所 示 o 





c | © filey//C:/Users/SONY/Desktop/HTML5/ 文 件 /宠物 名 牌 信息 的 : 图 kagi soll: 


x 


选择 文件 | 狗 子 信息 ”此 网 页 显示 : 
成 功 完 成 网 子 信息 批量 上 传 ! 




















图 10.9 狗 子 信息 批量 上 传 


文件 名 : 狗 子 信息 . txt 


橡皮 ,金毛 犬 , 呵 呵呵 ,123456; 饮水 机 , 柴 犬 ,阿拉 斯 加 犬 , 1234728456; RAHE, 哈士奇 犬 ,不 呵呵 ， 
123999456; fft E , hifi t £ A , BJ Bk pk m , 12349876556; 大 脑袋 ,藏獒 犬 , 呵 吗 吗 呵呵 , 100023456 


文件 名 : 文本 信息 的 上 传 与 处 理 . html 


«! DOCTYPE HTML > 
< html lang = "en- US" 
<head> 
< meta charset = "UTF — 8"> 
<title> 宠 物 名 牌 信息 的 批量 导入 </title> 
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图 10.10 本 地 存储 调试 界面 内 已 保存 狗 子 信息 


</head> 
<body> 
< input type= "file" id= "fileInput"/> 
< button onclick = "saveInfo()"> 保 存 信息 </button > 
«script» 
function dogCard(petName, petKind, petOwner, tel) ( 
this.petName - petName; 
this.petKind = petKind; 
this.petOwner = petOwner; 
this.tel = tel; 
) 
function saveInfo()( 
var file = document. getElementById("fileInput").files[0]; 
var reader = new FileReader(); 
reader. readAsText(file); 
reader.onload = function(e)( 
var txt = new String(e. target. result); 
var info = txt.split(";"); 
for (var i= 0;i« info. length; i++ ){ 
var dog = new String(info[i]); 
var dogInfo - dog.split(","); 


var dogCarditem = new dogCard(dogInfo[0], dogInfo[ 1], dogInfo[ 2], dogInfo[3]) ; 











Application C G X Fiter 
Ml Manifest Key Value. 
Y Service Workers dem T petName” ASES, petKind": "IIBER" "petOwner" EJES" "tel'/1000234567] 
Ë Clear storage az Ü'petName" IRET, "petKind" ^ $E" "petOwner": IJIJI","tel":"123456") 
Ld 'petName" IBS" " petKind" "EHSEIS 7 "petOwner"" INASI", "tel":71234987655.... 
Sage 饮水 机 TipetNamer DUKE "petKind" "SER" "petOwner "FRUTA" "tel':712347284567] 
Y EE Local Storage === [ petName"” BEDE” "petKind""M&-ERE-R" "petOwner": RII", "ter" ”123999456") 


localStorage[dogInfo[0]] = JSON. stringify(dogCardItem); 


) 
alert(" 成 功 完 成 狗 子 信息 批量 上 传 ! "); 
} 
} 
«/script» 
</body> 
</html> 
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在 这 个 实例 中 ,通过 单 击 * 保 存 信息 ?按钮 来 触发 函数 savelnfoO ,以 开始 宠物 名 牌 信息 
的 批量 存储 。 与 单纯 读 取 文 本 文件 内 容 的 实例 不 同 的 是 ,在 这 个 批量 存储 的 实例 中 , 当 用 
FileReader 对 象 完成 文本 信息 的 读 取 后 ,并 不 是 直接 显示 到 页 面 的 指定 区 域 。 而 是 传人 文 
本 内 容 构造 String 对 象 , 再 进行 字符 串 内 容 的 分 隔 ,最 后 将 一 整 串 的 多 个 宠物 信息 文本 以 
宠物 名 牌 为 单位 筛选 出 来 ,并 构造 自 定义 的 dogCard 对 象 .再 一 一 存储 。 通 过 这 样 的 方式 ， 
就 可 以 实现 信息 的 批量 存储 或 处 理 。 


10.5.2 读 取 图 片 内 容 


文件 读 取 对 象 不 仅 提供 了 readAsText() 方 法 来 读 取 文件 中 的 文本 内 容 , 还 提供 了 
readAsDataURL() 方 法 。 这 个 方法 可 以 将 图 片 文件 转换 为 Data URL 格式 ,从 而 可 以 很 方 
便 地 读 取 图 片 文件 并 显示 。Data URL 是 一 种 数据 格式 , 它 将 图 片 转换 为 base64 编码 的 字 
符 串 。 这 种 格式 广泛 应 用 于 互联 网 的 图 片 传输 , 相 比 于 通过 src 属性 指定 服务 器 上 的 资源 ， 
将 图 片 资源 转换 为 Data URL 格式 直接 插入 HTML 页 面 的 方式 只 需要 向 服务 器 请 求 一 次 
资源 ,而 不 需 额 外 请 求 图 片 资源 ,从 而 可 以 优化 网 页 的 加 载 效率 。 

在 HTML 页 面 中 ,直接 将 < img > 标签 的 src 属性 指定 为 特定 的 Data URL 便 可 以 实现 
一 个 图 片 在 页 面 的 加 载 。 在 下 面 的 这 个 实例 中 ,通过 文件 格式 的 < input > 标签 实现 图 片 的 
选取 并 显示 ,其 在 浏览 器 中 的 展示 效果 如 图 10. 11 所 示 。 














10.11 图 片 的 读 取 


文件 名 : 读 取 图 片 内 容 . html 


<!DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 


< neta charset = "UTF — 8"> 
<title> 读 取 图 片 内 容 </title> 
</head> 
<body> 
< input type = "file" id= "fileInput" onchange = "processFile(this.files)"/> 
< div id= "displayArea"» 
</div> 
«script» 
function processFile(files)( 
var displayArea = document.getElementById("displayArea"); 
displayArea. innerHTML = ""; 
var file = files[0]; 
// 创 建 一 个 文件 读 取 对 象 
var reader = new FileReader(); 
reader. readAsDataURL(file); 
reader.onload = function(e)( 
var newImg = document.createElement(" img"); 
newImg.src - e.target.result; 
displayArea. appendChild(newImg); 
) 
) 
</script> 
</body> 
</html> 


这 个 实例 的 代码 与 读 取 文件 的 简单 应 用 的 代码 类 似 。 不 同 的 地 方 在 于 ,在 创建 了 
FileReader 对 象 之 后 ,我们 调用 了 其 readAsDataURL() 方 法 ,并 将 所 获取 的 文件 对 象 作为 
参数 传人 。 这 个 方法 就 会 将 所 选择 的 文件 转换 为 Data URL 格式 。 然 后 在 读 取 完成 后 , 创 
建新 的 < img > 标签 ,并 将 src 属性 设置 为 FileReader 对 象 的 读 取 结果 。 最 后 将 < img > 标签 
添加 到 HTML 页 面 ,这 样 就 完成 了 图 片 的 选取 ,并 可 以 在 当前 页 面 中 显示 。 


10.6 3J 题 


1. 使 用 哪 一 个 标签 可 以 完成 文件 的 上 传 ? 

2. 如 何 实现 多 文件 的 上 传 ? 

3. 如 何 自 定义 文件 上 传 控 件 ? 在 本 书 实例 的 基础 上 ,自己 设计 一 个 更 为 美观 的 文件 上 
传 控件 。 

4. 结合 第 6 章 所 学 知识 ,设计 一 个 支持 多 文件 拖 忠 上 传 的 控件 。 要 求 当 每 一 个 文件 拖 
入 选 定 区 域 后 ,要 对 该 文件 的 基本 信息 进行 显示 。 同 时 ,用 户 也 可 以 选择 取消 选中 的 已 上 传 
文件 。 

5. 在 10.5.2 节 的 实例 基础 上 ,对 实例 进行 改进 。 以 实现 图 片 的 选择 上 传 并 显示 图 片 
的 缩 略 图 以 及 图 片 信息 ,无 论 图 片 大 小 ,请 按照 统一 规格 进行 显示 。 
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第 11 章 通 5 


Web 应 用 的 构建 不 仅 需要 前 端 丰富 的 展示 界面 ,更 需要 实现 浏览 器 客户 端 与 服务 器 完 
成 通信 , 方 可 实现 Web 应 用 本 身 的 业务 逻辑 。 在 最 开始 的 章节 我 们 学 习 到 了 ,客户 端 浏览 
器 需要 通过 HTTP 协议 向 服务 器 请 求 资源 来 实现 网 页 的 浏览 。 本 章 将 更 加 深入 地 对 
HTTP 协议 的 通信 过 程 进 行 学 习 。 同 时 ,还 将 具体 学 习 几 种 客户 端 浏览 器 和 服务 器 的 通信 
方式 ,分 别 是 表单 的 发 送 、AJAX、 服 务 器 发 送 事 件 、WebSocket 以 及 Fetch API。 需 要 注意 
的 是 ,由 于 本 章 涉及 客户 端 浏 览 器 和 Web 服务 器 之 间 的 通信 ,所 以 本 章 内 的 实例 代码 需要 
部 署 在 Web 服务 器 上 运行 并 访问 。 


11.1 HTTP 协议 


超 文本 传输 协议 ,英文 缩写 为 HTTPCHyperText Transfer Protocol) ,是 Web 实现 数 
据 通 信 的 基础 。 客 户 端 浏览 器 通过 从 服务 器 获取 所 需 资源 ,服务 器 通过 它 接收 并 处 理 从 客 
户 端 传 来 的 数据 ,这 些 都 离 不 开 HTTP 协议 的 支持 。 

为 了 更 好 地 理解 浏览 器 与 服务 器 之 间 的 通信 相关 知识 ,有 必要 简要 了 解 这 一 切 的 基 
础 一 一 HTTP 协议 。 


11.1.1 协议 特性 


1. 无 连接 

HTTP 是 无 连接 的 ,这 意味 着 客户 端 与 服务 器 建立 连接 并 发 送 HTTP 请 求 之 后 ,连接 
即刻 关闭 。 之 后 ,客户 端 便 等 待 来 自 服务 器 的 响应 。 当 服务 器 准备 向 客户 端 发 送 响应 时 ,会 
重新 与 客户 端 建立 连接 ,并 将 响应 发 送 给 客户 端 。 互 联网 协议 中 其 他 的 一 些 有 连接 协议 ,如 
FTP 协议 等 ,在 服务 器 与 浏览 器 建立 连接 之 后 ,会 保持 一 段 时 间 的 连接 状态 ,在 这 期 间 服 务 
器 与 客户 端 会 知晓 彼此 的 基本 信息 ,而 不 像 HTTP 协议 每 次 通信 客户 端 与 服务 器 端 都 形 同 
陌路 ,都 需要 说 出 自己 的 基本 信息 。 相 比 于 有 连接 ,无 连接 特性 大 大 简化 了 HTTP 通信 的 
过 程 , 早 期 HTTP 协议 只 是 为 传输 HTML 文档 而 设计 的 ,并 未 针对 如 今 广 为 流行 的 视频 、 
购物 等 应 用 。 

2. 无 状态 

HTTP 协议 之 所 以 是 无 连接 的 ,是 因为 HTTP 协议 本 身 的 无 状态 性 ,客户 端 与 服务 器 
端 只 在 发 送 HTTP 报 文 的 过 程 中 建立 连接 ,发 送 完 毕 便 断 开 , 在 这 个 过 程 中 并 不 保存 对 方 
的 基本 信息 。 换 句 话说 ,客户 端 与 服务 器 端的 每 次 发 送 与 接收 HTTP 报 文 都 如 同 第 一 次 通 
信 一 样 , 互 不 相识 。 


3. 可 以 传输 任意 类 型 的 数据 

尽管 HTTP 协议 早期 的 设计 初衷 只 是 传输 HTML 文档 ,并 不 支持 其 他 的 数据 类 型 。 
但 随 着 时 代 的 发 展 ,尤其 是 互联 网 的 迅猛 发 展 ,HTTP 协议 支持 任何 数据 类 型 的 传输 ,前 提 
是 客户 端 与 服务 器 端 彼 此 知晓 如 何 处 理 这 些 不 同类 型 的 数据 。 故 需要 客户 端 和 服务 器 端 指 
定 以 MIME 类 型 定义 的 内 容 类 型 (content type)。 


11.1.2 通信 过 程 


HTTP 的 通信 过 程 大 致 如 图 11.1 所 示 。 由 于 HTTP 协议 是 应 用 层 协议 ,所 以 抽象 来 
看 ,通信 的 双方 分 别 是 客户 端 应 用 程序 (通常 是 浏览 器 ) 与 服务 器 端 应 用 程序 , 即 所 谓 的 服务 
器 后 端 处 理 程序 。 


HTTP 请 求 





服务 器 端 


HTTP 响 应 


图 11.1 HTTP 通信 过 程 


客户 端 与 服务 器 端 在 通信 之 前 都 需要 接 和 人 因特网 。 通 常 ,用户 通过 客户 端 主机 的 浏览 
器 应 用 程序 输入 URL 或 打开 一 个 指向 某 一 特定 URL 的 超级 链接 ,然后 浏览 器 应 用 程序 与 
服务 器 端 程序 建立 连接 ,并 将 用 户 所 请 求 的 URL 变 为 一 个 HTTP 请 求 发 送 至 服务 器 端 ,向 
服务 器 请 求 特定 资源 。 随 后 断 开 连接 ,等 待 之 后 来 自 服务 器 端的 HTTP 响应 。 

当 服务 器 端 对 客户 端 所 发 送 的 HTTP 请 求 进行 处 理 之 后 , 若 存 在 请 求 的 资源 ,服务 器 
将 会 把 资源 通过 HTTP 报 文 传送 给 用 户 。 同 样 , 服 务 器 端 需要 与 客户 端 浏览 器 建立 连接 ， 
随后 发 送 相应 的 HTTP 响应 ,发 送 完毕 断 开 连接 。 


11.1.3 HTTP 报 文 结 构 


如 图 11. 2 所 示 , HTTP 报 文 一 般 由 三 部 分 组 成 ,分 别 是 开始 行 (start line) .首部 行 
(headers) 和 实体 主体 (body) 。 这 三 部 分 通常 以 文本 的 形式 构成 ,有 时 实体 主体 内 可 能 包括 
二 进 制 数据 。 具体 到 每 一 个 HTTP fi x. 








HTTP 请 求 报 文 与 HTTP 响应 报 文 ,有 所 不 同 。 Sete | 0] fr 
1. HTTP WR (Request) 
如 图 11. 3 所 示 , 在 一 个 HTTP 请 求 的 开始 。 Headers go 


行 中 ,通常 包括 请 求 方法 .统一 资源 标识 符 
(Uniform Resource Identifier, URD 以 及 HTTP 

















版 本 。 其 中 ,请 求 方法 会 指示 服务 器 端 按 下 来 要 Body 实体 主体 
做 哪 一 种 操作 ,常用 的 有 4 种 

* GET 获取 资源 。 

* POST 传输 实体 主体 。 ENS HT 


Ww 
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。 PUT 传输 文件 。 

。DELETE 删除 资源 。 

统一 资源 标识 符 URI 是 用 于 标识 某 一 互联 网 资源 名 称 的 字符 串 ,该 种 标识 允许 用 户 对 
网 络 中 的 资源 通过 特定 的 协议 进行 交互 操作 。 














Kis 
开始 行 GET /Service Worker/style.css HTTP/1.1 
Start line 

CÓ Host:localhost:8088 

首部 行 

Headers 


Accept:text/css 


Accept-language:zh-CN,zh 











11.3 HTTP 请 求 


在 HTTP 请 求 的 首部 行 中 ,一 般 都 会 包括 请 求 的 主机 (Hosb ,接受 的 文件 格式 (Accept) 以 
及 接受 语言 (Accept-language)。 在 图 11. 3 中 可 以 看 出 ,该 HTTP, 请 求 的 主机 是 localhost; 
8088 ,所 接受 的 文本 将 被 作为 CSS 文件 格式 处 理 , 所 接受 语言 为 中 文 。 

2. HTTP 响应 (Response) 

在 一 个 HTTP 响应 中 ,可 以 看 到 其 中 的 开始 行 与 HTTP 请 求 有 一 些 区 别 。 开 始 行 中 
除了 HTTP 版 本 之 外 ,还 包括 一 个 状态 码 (status-code) , 它 用 来 反映 这 个 HTTP 响应 的 具 
ERE: 用 户 请 求 的 资源 成 功 传 回 ,还 是 根本 找 不 到 。 常 见 的 状态 码 200:OK ,表示 成 功 定 
位 资源 并 返回 给 用 户 ; 而 404:Not Found 则 表示 资源 并 不 存在 。 对 于 首部 行内 容 而 言 ,一 
般 会 包含 一 些 内 容 格 式 (content-type) 、 时 间 日 期 以 及 服务 器 环境 相关 信息 等 。 

对 于 HTTP 响应 ,在 资源 存在 的 情况 下 ,一般 会 包括 实体 主体 部 分 ; 而 在 HTTP 请 求 
中 , 则 通常 不 含 实 体 主 体 部 分 。 其 中 ,图 11.4 中 的 HTTP 响应 的 实体 主体 内 就 是 所 请 求 的 

















CSS 文件 的 文本 形式 。 
开始 行 HTTP/I.1 200:OK 
Start line 
首部 行 
Headers Content-type:text/css 
Date: Wed,23 Aug 2017 02:22:22 GMT 
Server:Apache/2.4.23( Win32)PHP/5.6.25 
实体 主体 ; 
Body /ServiceWorker/style.css 








图 11.4 HTTP 响应 


以 上 便 是 HTTP 请 求 与 响应 的 基本 结构 ,其 中 只 包括 一 些 主要 参数 , 当然 具体 的 
HTTP 报 文 会 包含 更 多 的 信息 ,请 有 兴趣 的 读者 自行 研习 。 


11.1.4 浏览 器 查看 HTTP 报 文 


通过 浏览 器 的 调试 界面 ,可 以 查看 浏览 器 与 服务 器 的 通信 状况 ,对 一 些 具 体 的 HTTP 
报 文 进行 查询 和 调试 。 以 Chrome 浏览 器 为 例 , 按 F12 键 进入 浏览 器 的 调试 界面 ,然后 选择 
Network 菜单 ,可 以 看 到 当前 浏览 器 与 Web 的 通信 状况 ,可 以 通过 再 次 刷新 页 面 进行 一 次 
调试 ,可 以 看 到 客户 端 所 请 求 的 各 个 资源 ,如 图 11. 5 所 示 。 





[w Ú] | Elements Console Sources Network Performance Memory Application Security Audits Ex 
6 G | m Y |Vvew E = B Groupby frame | (Ü) Preservelog E Disable cache | E Offline No throttling Y 


[Fiter |E Regex © Hide data URLs 图 | XHR Js CSS Img Media Font Doc WS Manifest Other 
10000 ms  20000ms 30000ms 40000ms 50000ms 60000ms 70000ms 80000ms  90000ms 100000ms 110000 m| 


Name Sta. Type Initiator |Size Time | Waterfall . 
[]SemiceWorke/ — 200 doc. Other — 94. 46. 
日 style<ss 200 styl. ündex 39. 40. 
[a] dogejpg 200 jpeg (nde) 30. 41. 
[ O service-worker.. 200 java.. service- — 0B 17.. 
L © indexhtm!. 200 text. Other 94. 7ms 
L] O style.css 200 text... Other (fro. 4ms 
口 dogejpg 200 jpeg Other (ro. 2ms 


[L| O service-worker.. 200 java.. service- (fro. 7 ms 





8 requests | 5.2 KB transferred | Finish: 17 min | DOMContentLoaded: 114 ms | Load: 114 ms 





11.5 浏览 器 查看 通信 相关 信息 
单 击 单个 资源 , 便 可 以 具体 查看 该 资源 所 对 应 的 HTTP 报 文 与 具体 信息 ,如 图 11.6 所 示 。 








Name X [Headers | Preview Response Timing 
L ] SeviceWorker/ Y General 
Request URL: nttp://1calhost:8088/ServiceWorker/style.css 
z Request Method: GET 
la] dogej 
li P9 Status Code: @ 200 OK 
L] © sevice-workerjs Remote Address: [::1]:8088 
口 indexhtmi Referrer Policy: no-referrer-when-downgrade 
L] o seess "Response Headers view source 
L 9 gogejpg Accept-Ranges: bytes 
L] 9 service-worker js. Connection: Keep-Alive 


Content-Length: 102 

Content-Type: text/css 

Date: Wed, 23 Aug 2017 02:22:22 GMT 

ETag: "66-55671c55d3af0" 

Keep-Alive: timeout-5, max=99 

Last-Modified: Fri, 11 Aug 2017 03:18:46 GMT 
Server: Apache/2.4.23 (Win32) PHP/S.6.25 


Y Request Headers view source 
Accept: text/css,*/*;q-0.1 
Accept-Encoding: gzip, deflate, br 
Accept-Language: zh-CN, zh;a=0.8 
Cache-Control no-cache 
Connection: keep-alive 
Host: localhost:8088 
Pragma: no-cache 
Referer: http: //1oca1host :8888/Serviceuorker/ 
User-Agent: Mozilla/S.@ (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gd 
cko) Chrone/60.0.3112.101 Safari/S37.36 











8 requests | 5.2 KB transferred | F... 





图 11.6 浏览 器 查看 具体 HTTP {RX 
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11.1.5 HTTPS 


超 文本 传输 安全 协议 (Hypertext Transfer Protocol Secure,HTTPS) 是 一 种 通过 计算 
机 网 络 进行 安全 通信 的 传输 协议 。HTTPS 经 由 HTTP 通信 ,但 利用 SSL/TLS 来 加 密 数 
据 包 。 它 具有 以 下 特点 : 

。 内 容 加 密 一 一 建立 安全 的 信道 ,保证 信息 的 安全 。 

° 身份 验证 一 一 确认 通信 双方 身份 的 真实 与 可 靠 性 。 

。 数据 完整 性 一 一 防止 通信 内 容 被 中 间 人 进行 自 改 。 


11.2 发 送 表 单 信息 


< form > 元 素 定义 了 一 个 HTML 文档 页 面 内 的 表单 。 在 许多 应 用 场景 中 ,都 需要 用 户 
进行 表单 的 填写 ,比如 : 填写 个 人 基本 信息 、 发 送 邮 件 、 填 写 订单 、 登 录 账户 等 ,都 有 填写 表 
单 这 一 环节 。 表 单 的 填写 与 发 送 是 一 种 十 分 重要 的 客户 端 与 服务 器 端的 通信 方式 。 客 户 端 
将 数据 通过 表单 的 形式 传 给 服务 器 端 程序 ,然后 服务 器 根据 所 传 数 据 进 行 处 理 和 响应 ,由 此 
客户 端 与 服务 器 端 得 以 通信 ,进而 服务 器 端 可 以 为 用 户 提供 各 种 各 样 的 服务 。 


11.2.1 表单 的 提交 


下 面 通过 一 个 简单 的 实例 了 解 表单 的 提交 过 程 。 下 面 的 实例 分 别 用 POST 和 GET Wi 
种 方式 对 表单 进行 提交 。 实 例 代 码 为 PHP 文件 ,需要 部 署 于 服务 器 环境 运行 。 两 个 实例 
的 展示 效果 分 别 如 图 11.7 和 图 11. 8 所 示 。 





€ > Q [O localhost:8088/sendFormData/echoDataPost.php 





Hello World 








11.7 POST 





€ GG | @ localhost:8088/sendFormData/echoDataGet.php?text-Hello « World t|: 








Hello World 





图 11.8 GET 


文件 名 : echoDataPost. php 


<?php 
if (isset( $ POST['text'])) 
{ 
$ message = $ POST['text']; 
echo $ message; 
) 
?> 


<! DOCTYPE HTML > 
< htnl lang = "en- US"> 
<head> 
< meta charset = "UTF — 8"> 
< title» POST 方法 </title> 
</head> 
<body> 
< form action = "echoDataPost. php" method = "post"> 
< input type = "text" name = "text" /> 
< button type = "submit"> 提 交 </button> 





</form> 
</body> 
</html > 
文件 名 : echoDataGet. php 第 
11 
<?php x* 
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if (isset( $ GET['text'])) 

í 
$ message = $ GET['text']; 
echo $ message; 


) 
?> 
<! DOCTYPE HTML > 
<html lang = "en - US"> 
<head> 
< meta charset = "UTF - 8"> 
< title> GET 方法 </title> 
</head> 
< body> 
< form action = "echoDataGet. php" method = "get"> 
< input type = "text" name = "text" /> 
< button type = "submit"> 提 交 </button> 
</form> 
</body> 
</html> 
将 两 个 PHP 文件 部 署 在 服务 器 后 ,通过 浏览 器 访问 ,效果 如 图 11.7 和 图 11. 8 所 示 。 
乍 一 看 两 个 实例 的 运行 效果 几乎 没有 差别 ,但 仔细 观察 ,通过 POST 和 GET 方法 提交 表单 
的 运行 效果 并 不 相同 ,在 11. 2. 2 节 将 详细 介绍 。 
实例 的 代码 由 两 部 分 组 成 ,分 别 是 PHP 代码 段 与 HTML 代码 段 。HTML 代码 段 的 
< body > 标签 内 ,包含 一 个 < form > 标签 。 该 标签 内 有 一 个 输入 框 以 及 一 个 提交 按钮 。 两 种 
提交 方式 的 主要 不 同 表现 在 < form > 元 素 的 属性 上 。action 属性 规定 在 发 送 表 单 时 ,页 面向 
何 处 发 出 请 求 。method 属性 中 , 则 定义 请 求 的 方法 ,在 这 里 分 别 使 用 post 与 get 两 种 方式 。 
而 PHP 文件 则 对 应 两 种 不 同方 法 的 不 同 处 理 并 输出 。 应 注意 ,< form > 标签 内 的 < input > 
标签 的 name 属性 ,该 属性 的 设 定 会 将 表单 中 输入 控件 的 值 与 以 name 属性 值 命名 的 变量 绑 
定 并 进行 传递 。 最 后 < form > 标签 内 的 < button > 元 素 的 type 属性 submit 定义 了 这 是 一 个 
提交 按钮 。 单 击 它 会 将 表单 中 的 数据 提交 至 action 属性 中 所 定义 的 文件 进行 处 理 。 
运行 文件 后 ,在 输入 框 内 填写 " Hello World”, 单 击 * 提 交 ” 按 钮 。 首 先 ,输入 的 字符 串 
Hello World 会 变 成 text= Hello 十 World, 其 中 text 即 为 < input > 标签 的 name 属性 值 。 随 
后 text= Hello+ World 会 被 作为 HTTP 请 求 的 一 部 分 发 送 至 服务 器 端 程序 来 处 理 。 服 务 
器 端的 PHP 代码 会 识别 text= Hello 十 World, 并 将 其 解析 为 变量 名 与 变量 值 的 组 合 ,并 可 
以 获取 其 中 的 内 容 , 然 后 输出 。 


11.2.2 POST 5 GET 比较 


在 11.2.1 节 的 实例 中 ,我 们 使 用 两 种 方法 进行 了 提交 表单 的 操作 ,然而 令 人 失望 的 是 
两 种 操作 的 效果 基本 一 样 。 但 其 实 有 一 些 不 同 , 细 心 的 读者 可 能 会 发 现 ,两 种 不 同方 式 提交 
表单 后 ,浏览 器 URL 地 址 栏 所 显示 的 内 容 有 所 不 同 。 当 然 ,这 只 是 二 者 的 区 别 之 一 。 

POST 方法 目的 是 将 数据 传递 给 指定 的 资源 ( 即 服务 器 端 程序 ) 进 行 处 理 。GET 方法 
目的 是 向 服务 器 端 请 求 特 定 的 资源 。 显 然 ,两 种 方法 的 基本 应 用 目的 是 不 同 的 ,自然 二 者 传 


递 数据 的 方式 也 有 所 不 同 。POST 方法 中 ,表单 数据 信息 会 被 记录 在 HTTP 请 求 的 实体 主 
体内 传递 ; 而 GET 方法 则 是 将 表单 数据 信息 写 人 URL, EJ URL 的 一 部 分 传递 ,而 方法 
为 GET 的 HTTP 请 求 则 可 以 不 包含 实体 主体 部 分 。 这 也 就 是 为 什么 对 于 上 述 实例 ,提交 
的 结果 会 有 些许 差异 。 除 此 之 外 ,POST 5 GET 还 有 如 下 的 不 同 。 

1. POST 方法 
POST 请 求 不 能 被 缓存 , 故 不 会 保留 于 浏览 器 的 历史 记录 中 ,同时 也 不 能 被 浏览 器 
添加 书签 进行 快速 访问 。 
POST 请 求 没有 数据 长 度 限制 。 
2. GET 方法 
* GET 请 求 会 被 缓存 ,并 被 保留 在 浏览 器 的 历史 记录 中 ,浏览 器 可 以 对 其 添加 书签 。 
* GET 请 求 会 将 所 传递 数据 暴露 在 URL 中 ,在 涉及 敏感 数据 如 用 户 名 、 密 码 等 的 传 
递 时 ,不 要 使 用 GET 方法 。 
GET 请 求 有 URL 长 度 限 制 。 
GET 请 求 最 好 只 应 用 于 获取 资源 ,如 访问 第 几 页 的 商品 目录 、 检 索 特定 的 内 容 等 。 


11.2.3  Post/Redirect/Get 设计 模式 


在 运行 测试 之 前 的 实例 时 ,有 些 读者 可 能 会 发 现 ,每 当 表 格 被 提交 一 次 ,页 面 好 像 都 会 
迅速 刷新 一 次 。 可 能 更 多 的 读者 在 现实 中 进行 网 上 购物 或 是 网 站 注册 时 ,也 会 遇 到 类 似 的 
状况 。 由 于 在 与 Web 上 其 他 应 用 通信 时 有 一 定 的 延 时 ,不 像 本 地 测试 那样 即 点 即 开 , 所 以 
很 多 时 候 在 提交 表单 之 后 ,都 可 以 用 肉眼 观察 到 网 页 有 一 小 段 时 间 处 于 正在 刷新 状态 ,完成 
之 后 便 跳 转 到 一 个 新 的 页 面 或 者 在 当前 页 面 显示 成 功 信息 。 

之 所 以 在 每 次 提交 表单 之 后 都 会 有 类 似 这 样 的 一 个 所 谓 刷新 或 者 跳 转 的 过 程 ,是 因为 
Post/Redirect/Get(PRG) 这 一 Web 设计 模式 ,该 设计 模式 主要 的 目的 是 避免 表单 的 重复 提 
交 。 其 原理 如 图 11.9 所 示 。 


POST 请 求 








3XX 响 应 ， ü 





位 Redirect 


. 新 的 GET 请 求 
网 页 











2XX 响 应 


图 11.9 POST-RedirectGET 


当 用 户 填 写 完 表单 并 提交 时 ,客户 端 会 向 服务 器 端 发 送 一 个 POST 请 求 ,传递 一 些 数 
据 给 服务 器 端 。 然 而 ,由 于 网 络 上 的 通信 不 可 能 永远 通畅 ,在 网 络 不 畅 时 或 者 数据 需要 服务 
器 处 理 一 段 时 间 的 情况 下 ,客户 端 可 能 不 会 马上 得 到 所 需 的 响应 ,而 处 于 等 待 中 的 用 户 可 能 
在 此 时 刷新 页 面 ,此 时 便 会 重新 发 送 与 之 前 相同 的 POST 请 求 ,由 此 会 造成 相同 表单 的 重 
复 提 交 。 在 实际 应 用 中 ,这 样 的 重复 可 能 会 导致 数据 的 不 一 致 ,造成 不 必要 的 损失 。 
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为 了 解决 这 一 问题 ,就 有 了 POST-Redirec-GET 模式 ,这 一 模式 在 网 页 发 出 了 一 个 
POST 请 求 后 ,马上 会 给 用 户 一 个 响应 ,状态 码 为 3XX Ch 302 等 ) ,这 意味 着 这 是 一 个 重 定 
向 响应 ,相当 于 服务 器 为 客户 端 指定 了 一 个 新 URL ,指示 客户 端 浏 览 器 先 访问 这 个 URL. 
争取 不 让 客户 端 有 机 会 发 送 重复 的 POST 请 求 。 于 是 ,在 收 到 状态 码 为 3XX 的 HTTP ng 
应 后 ,用 户 会 马上 发 出 一 个 新 的 GET 请 求 ,请求 一 个 新 的 页 面 , 然 后 等 服务 器 处 理 完 所 上 
传 的 数据 后 ,给 用 户 返 回 相 应 的 HTTP 响应 ,状态 码 为 2XX( 如 200 等 ) 。 

如 今 大 部 分 浏览 器 与 服务 器 都 默认 采用 这 样 的 模式 进行 表单 的 提交 ,图 11.9 中 虚线 框 
内 的 过 程 会 被 浏览 器 与 服务 器 自动 完成 。 这 样 ,在 每 次 提交 表单 时 ,页面 都 会 进行 一 次 所 谓 
的 “刷新 ” ,准确 地 说 是 重 定位 。 


11.3 AJAX 


在 11.2 节 中 ,我 们 学 习 了 发 送 表单 信息 。 在 表单 提交 的 过 程 中 ,常常 会 不 可 避免 地 进 
行 重 定向 。 这 样 的 效果 让 用 户 使 用 浏览 器 时 的 实时 性 大 打折 扣 , 每 当 我 们 要 查询 什么 的 时 
候 整 个 页 面 都 需要 刷新 。 尤 其 是 当 我 们 在 网 站 注册 一 个 账户 时 ,每 次 都 要 等 表单 上 传 之 后 
才能 知道 这 次 填写 是 否 合格 (用 户 名 是 否 有 人 注册 、 密 码 是 否 符合 规矩 等 ) ,填写 合格 注册 成 
功 还 好 ,可 要 是 填写 有 些 问 题 , 那 就 麻烦 了 ,还 需 重 填 一 遍 , 然 后 再 进行 提交 操作 。 如 果 能 在 
同一 个 页 面 完成 客户 端 与 服务 器 端的 信息 交换 该 多 好 ,于 是 AJAX 技术 应 运 而 生 。 

AJAX 是 Asynchronous JavaScript And XML 即 异 步 的 JavaScript 和 XML 的 缩写 。 
它 并 不 是 一 个 单独 的 编程 语言 ,也 不 是 一 个 新 的 函数 库 。 它 是 由 浏览 器 支持 的 
XMLHttpRequest 对 象 .HTML 文档 和 JavaScript 共同 组 成 的 一 种 编程 模式 。AJAX 使 浏 
览 器 页 面 与 服务 器 端的 信息 异步 传输 成 为 可 能 ,让 浏览 器 后 台 完 成 数据 的 传输 与 获取 ,从 而 
能 够 部 分 地 更 新 HTML 页 面 ,而 不 是 重新 载 入 一 个 新 的 文档 。 


11.3.1 XML 


AJAX 部 分 中 的 最 后 一 个 单词 是 XML, XML 是 可 扩展 标记 语言 (eXtensible Markup 
Language) ,被 用 于 标记 电子 文件 使 其 具有 结构 性 ,可 以 用 来 标记 数据 .定义 数据 类 型 ,是 一 
种 允许 用 户 对 自己 的 标记 语言 进行 定义 的 源 语 言 。 它 的 设计 初衷 主要 是 用 来 存储 和 传输 数 
据 , 且 可 以 被 人 与 机 器 同时 识别 。AJAX 命名 中 的 XML 有 一 定 的 误导 性 ,其 实 AJAX 并 不 
一 定 以 XML 作为 数据 传输 的 格式 ,JSON 格式 也 可 以 在 传输 过 程 中 使 用 ,同时 AJAX 也 支 
持 二 进 制 数据 或 其 他 格式 的 数据 传输 。 

XML 虽然 在 许多 应 用 场景 下 逐渐 被 JSON 有 所 取代 ,但 其 仍 广泛 应 用 于 各 式 各 样 的 
IT 系统 之 间 ,作为 存储 和 传输 数据 的 一 种 方式 。 同 时 它 也 被 W3C 列 为 推荐 使 用 。 下 面 简 
要 学 习 一 下 XML。 首 先 来 看 一 个 简单 的 XML 文件 ,该 实例 在 浏览 器 中 的 浏览 效果 如 
图 11. 10 所 示 。 

文件 名 : dog. xml 

<?xml version = "1. 0" encoding = "UTF - 8"?> 


< dogs > 
< dog date = "2017/08/22"> 


< nane > 橡皮 </name> 
<kind> 金 毛 犬 </kind> 
< owner > 大 脑袋 </owner > 
<tel>10100101 </tel> 
</dog> 
< dog date = "2017/08/12"» 
« nane > 饮水 机 </name> 
<kind> 阿 拉 斯 加 犬 </kind> 
< owner > 灭火 器 </owner > 
<tel> 10100111 </tel> 
</dog> 
< dog date = "2017/08/2"» 
< name »Hi XL B «/name > 
« kind 2E R</kind> 
< owner > 迫 击 炮 </owner > 
<tel>10110111 </tel> 
</dog> 
</dogs> 








|| document tree is shown below. 


v (dogs? 

v «dog datez" 2011/08/22"» 
nane» EE C /nane> 
kind EX /kind 
Comed KAR omer) 
<te1>10100101</te1> 

</dog> 

v «dog. datez" 2011/08/12*» 
《mame) 饮 水 机 </name>》 
《kind> 阿 拉 斯 加 大 </kindy 
《owmer> 灭 火器 Womer> 
te1210100111/te1» 

</dog> 

v Cdog date=”2017/08/2"> 
<name) 电 风扇 </nane> 
“kindyf k </kinp 
Comer» Ait omer) 
<tel>10110111</tel> 

</dog> 

</dogs> 





Æ 11.10 XML 


尽管 XML 文档 仅 作为 数据 的 存储 与 传输 的 媒介 ,不 做 任何 事 , 它 也 可 以 被 一 些 浏览 器 
以 树 形 结构 来 显示 出 来 ,如 图 11. 10 所 示 。 观 察 代码 ,首先 可 以 发 现 XML 文档 的 结构 与 标 
签 形式 同 HTML 十 分 相似 。 相 同 的 是 .它们 都 是 由 开 闭 标签 组 合 而 成 的 结构 化 文档 ; 不 同 
的 是 ,XML 并 不 是 HTML 的 替代 方案 , 且 XML 中 标签 的 命名 是 自 定 义 的 ,也 可 以 自 定义 
属性 。 


W — 3 
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在 实例 代码 中 , 自 定义 了 一 个 XML 文档 ,标签 以 英文 单词 定义 < dogs > 标签 ,代表 狗 子 
们 ,在 该 标签 里 可 以 有 许多 < dog > 标签 , 即 一 个 个 单个 的 狗 子 ,在 每 个 < dog > 标签 里 还 设置 
了 date 属性 。 每 个 狗 子 都 有 各 自 的 < name > 名 字 标 签 .< kind > 品种 标签 .< owner > 主人 标 
A < tel > 主人 电话 标签 。 

需要 注意 的 是 XML 文档 中 的 一 些 语法 。 
首先 代码 中 的 第 一 行 “<? xml version 王 "1. 0" encoding 二 "UTF-8"? >” 是 XML 的 
前 述 (prolog)。 它 定义 了 XML 文档 内 支持 的 编码 方式 ,以 及 XML 文档 的 版 本 。 前 
述 是 可 选 的 ,如 果 需 要 定义 ,应 放 在 第 一 行 。 
XML 标签 与 内 容 均 是 大 小 写 敏感 的 ,相同 内 容 而 大 小 写 有 区 别 的 标签 将 被 识别 为 
不 同 的 标签 。 
XML 标签 必须 同时 有 开 闭 标签 , 且 必 须 正 确 嵌 套 并 符合 结构 化 文档 规范 。 
XML 文档 中 必须 有 唯一 的 一 个 根 标签 , 即 该 根 标签 的 前 后 标签 于 括 所 有 内 容 。 
XML 标签 的 属性 值 必须 使 用 引号 声明 。 
XML 文档 中 的 注释 与 HTML 文档 的 注释 相同 , 形 如 “<!-- Helle World -->”。 


11.3.2 XMLHttpRequest + £ 


通过 XMLHttpRequest 对 象 ,页 面 可 以 实现 数据 的 异步 传输 与 接收 ,并 不 对 当前 页 面 
产生 影响 。 本 节 将 用 两 个 实例 ,分 别 介绍 借助 XMLHttpRequest 完成 的 数据 发 送 与 获取 过 
程 。 第 一 个 实例 包含 两 个 文件 ,分 别 是 xhrSendData. html 和 xhrSendData. php ,该 实例 将 
数据 传输 至 服务 器 端的 PHP 文件 ,并 将 所 传 信息 保存 为 文本 文件 。 其 在 浏览 器 中 的 展示 
效果 如 图 11. 11 一 图 11. 13 所 示 。 


图 localhostB088/sendFc. x 
c c | © localhost:8088/sendFormData/xhrSendData.html 


pve [| 














图 11.11 xhr 发 送 数据 
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11.12. xhr 发 送 数据 调试 界面 











2017/8/25 10:24 
2017/8/23 17:32 
2017/8/23 17:34 


(H) 


Hello World 


m 
testtxt ”修改 日 期 : 2017/8/25 10:51 创建 日 期 : 2017/8/23 16:02 


文本 文档 大 小 155 


11.13 所 保存 的 文本 


文件 名 : xhrSendData. html 


<! DOCTYPE HTML > 
< html lang = "en- US" 
<head> 


< meta charset = "UTF — 8"> 
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<title></title> 
</head> 
<body> 
<div> 
< input type = "text" id= "text"/> 
< button onclick = "sendData( )"> 提 交 </button> 
</div> 
< script > 
var url = "http://localhost:8088/sendFormData/xhrSendData. php"; 
function sendData()( 
var text = document.getElementById("text"). value; 
var xhr = new XMLHttpRequest() ; 
xhr. open( "POST" , url, true); 
xhr. setRequestHeader("Content - type", "application/x— www- form — urlencoded"); 
xhr. send("text = " + text); 
) 
</script> 
</body> 
</html> 


文件 名 : xhrSendData. php 


<?php 
if (isset( $  POST[ 'text']))( 
$ message = $ POST['text']; 
$ myfile = fopen("test.txt", "w"); 
fwrite( $ myfile, $ message); 
?> i 
在 xhrSendData. html 中 ,有 一 个 输入 框 和 “提交 ”按钮 , 单 击 “ 提 交 ” 按 钮 将 会 触发 单 击 
事件 处 理 函 数 sendData( )。 在 该 函数 中 ,首先 获取 输入 框 内 容 , 然后 创建 一 个 
XMLHttpRequest 对 象 实例 xhr。 接 着 调用 XMLHttpRequest 对 象 的 open() 方 法 ,输入 参 
数 分 别 是 ,POST 指定 该 次 异步 传输 的 HTTP 报 文 所 采用 的 方法 为 POST «url 为 报 文 接收 
方 即 服 务 器 端的 处 理 程序 的 URL。 最 后 一 个 参数 可 选 ,指定 该 发 送 报 文 是 否 为 异步 操作 ， 
默认 为 true。 
要 将 数据 进行 传输 ,需要 将 变量 以 某 种 形式 添加 到 HTTP 请 求 中 。 为 了 让 客户 端 与 服 
务 器 端 都 能 够 对 数据 进行 正确 解析 ,通过 XMLHttpRequest 对 象 的 setRequestHeader() 方 
法 设置 首部 行 。 传 入 的 两 个 参数 作用 是 将 HTTP 报 文中 Content-type 设置 为 application/ 
x-www-form-urlencoded, 从 而 能 够 以 键 值 对 的 形式 发 送 数据 。 最 后 ,调用 send() 方 法 , 传 
入 键 值 对 作为 参数 进行 数据 传输 。 
在 xhrSendData. php 中 ,将 获取 接收 的 报 文 键 值 对 .并 调用 PHP 中 的 文件 相关 方法 ， 
将 所 接收 的 数据 写 入 文本 中 。 应 注意 ,fopen() 方 法 输入 的 第 二 个 参数 为 w, 这 样 设置 后 ， 
每 次 调用 都 会 重新 写 入 文件。 每 次 发 送 完 数 据 后 ,文本 中 保存 的 都 为 最 近 一 次 所 收 到 的 
数据 。 
在 服务 器 端 部 署 文 件 后 访问 ,在 输入 框 中 输入 数据 并 单 击 “ 提 交 ” 按 钮 ,可 以 发 现 不 同 于 


表单 的 提交 页 面 后 进行 重 定位 ,这 时 页 面 几乎 没有 明显 变化 。 打 开 相 应 目录 后 ,可 以 看 见 保 
存 为 文本 形式 的 传送 数据 。 在 打开 调试 界面 的 Network 选项 时 ,每 次 提交 都 会 看 到 一 个 
HTTP 请 求 ,类 型 显示 为 xhr, 即 XMLHttpRequest 的 缩写 形式 。 

在 上 一 个 HTML 文档 的 基础 上 稍 做 修改 ,通过 XMLHttpRequest 对 象 实现 对 之 前 所 
保存 的 文本 文件 的 内 容 的 提取 。 该 实例 在 浏览 器 中 的 展示 效果 如 图 11. 14 和 图 11. 15 
所 示 。 





€> g | © localhost:8088/sendFormData/xhrFetchData.html 


| Facio — — — Lin 


LER] 











Hello World 





11.14. 获取 数据 
文件 名 : xhrFetchData. html 


«! DOCTYPE HTML > 
<html lang = "en - US"> 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
<div> 
« input type = "text" id= "text"/> 
< button onclick = "sendData() "> 提交 </button > 
</div> 
<div> 
< button onclick = "fetchData( )"> 获 取 </button> 
<div id= "displayArea"> 
</div> 
</div> 


HTMLS5 实用 教程 





[X Ó] | Elements Console Sources Network Performance Memory Application > 1$ 
€ G w YW Vew = = Ø Groupby frame | (J Preservelog E Disable cache | (J Offline No thro 


Filter © Regex E Hide data URLs 


图 xe Js css Img Media Font Doc WS Manifest Other 


20ms 40 ms 60 ms 80 ms 100 ms 
Name Status — Type |Initiator |Size “Ti. Waterfall 5000 ms 100004 
Ll test. 304 xhr — atbrfetch 1898 2. wall 











1 requests | 189 B transferred 





11.15 获取 数据 调试 界面 


«script» 

var url = "http://localhost:8088/sendFormData/xhrSendData. php"; 

var getxhr = new XMLHttpRequest() ; 

function sendData()( 
var text = document.getElementById("text"). value; 
var xhr = new XMLHttpRequest(); 
xhr. open( "POST" , url, true); 
xhr. setRequestHeader("Content - type", "application/x- www- form- urlencoded"); 
xhr. send("text = " + text); 

) 

function fetchData()( 
var fetchurl = "http://localhost:8088/sendFormData/test. txt" ; 
getxhr.onreadystatechange = stateChange; 
getxhr. open( "GET", fetchurl, true); 
getxhr. send() ; 

) 

function stateChange() ( 
if (getxhr.readyState == 4)( 

if (getxhr. status 200)( 
var displayArea = document.getElementById("displayArea"); 





displayArea. innerHTML = getxhr. responseText; 


) 
</script> 
</body> 
</html> 


在 这 个 实例 中 ,添加 了 一 个 < div > 标签 ,该 标签 内 包括 一 个 “获取 ”按钮 以 及 另 一 个 
<div > 标签 。 为 “获取 ”按钮 指定 一 个 单 击 事件 处 理 函 数 fetchDataO 。 

在 之 前 的 基础 上 ,在 JavaScript 代码 中 创建 一 个 XMLHttpRequest 对 象 实例 getxhr fE 
为 全 局 变量 。 因 为 需要 为 该 XMLHttpRequest 对 象 实例 添加 事件 监听 ,所 以 将 其 声明 为 全 
局 变量 。 

在 fetchData() 函数 中 ,声明 了 一 个 变量 来 存放 将 要 获取 的 文本 文件 的 URL。 然 后 为 
XMLHttpRequest 对 象 添加 onreadystatechange 事件 监听 ,以 及 相应 的 处 理 函 数 
stateChange( ), 它 在 该 XMLHttpRequest 对 象 的 readyState 属性 发 生变 化 后 触发 。 
readyState 属性 返回 当前 XMLHttpRequest 对 象 所 处 状态 。 

在 stateChange() 中 ,先进 行 readyState 属性 的 判断 ,如 果 它 为 4, 则 服务 器 端 回 传 返回 
报 文 且 相应 内 容 下 载 完成 后 ,进行 status 状态 码 的 判断 ,如 果 为 200, 即 为 正确 返回 报 文 , 则 
通过 XMLHttpRequest 对 象 的 responseText 属性 返回 报 文 内 容 , 并 将 所 要 获取 的 文本 内 容 
显示 到 相应 区 域 。 由 此 使 用 AJAX 就 可 以 自由 地 通过 后 台 进 行 数据 的 获取 与 响应 ,而 不 必 
每 次 都 刷新 页 面 。 


11.3.3 AJAX # i 


比较 AJAX 与 表单 的 提交 ,可 以 发 现 AJAX 一 个 显著 的 优势 , 那 就 是 异步 性 。 相 比 于 
需要 整个 页 面 完 成 重 定位 的 表单 提交 .AJAX 将 数据 的 传输 与 获取 放 到 了 浏览 器 后 台 执 行 ， 
而 并 不 影响 当前 页 面 的 显示 。 

为 了 使 Web 应 用 获得 更 好 的 实时 性 ,一 般 可 以 采用 AJAX 轮 询 (polling) 来 实现 。 所 谓 
轮 询 , 即 是 当前 应 用 每 隔 一 段 时 间 反 复 地 向 服务 器 端 发 送 请 求 ,并 更 新 当前 数据 ,由 此 可 以 
实现 实时 性 。 结 合 本 节 之 前 的 实例 内 容 , 通 过 AJAX 轮 询 来 实现 一 个 简单 的 聊天 页 面 。 该 
实例 包含 两 个 文件 ,分 别 是 chat. html 和 chat. php。 这 个 聊天 程序 通过 将 聊天 内 容 存储 至 
文本 文件 中 ,然后 使 用 AJAX 轮 询 反复 访问 这 个 文本 文件 来 获取 最 新 的 聊天 内 容 , 该 实例 
在 浏览 器 中 的 展示 效果 如 图 11. 16 所 示 ,打开 调试 界面 可 以 看 到 该 应 用 的 轮 询 通信 情况 如 
图 11.17 所 示 。 

文件 名 : chat. html 


<! DOCTYPE HTML > 
<html lang= "en- US"> 
<head> 
< meta charset = "UTF - 8"> 
«title»«/title» 
«style» 
# displayArea( 
width:400px; 
height:300px; 
border:2px solid black; 
overflow- y:scroll; 
) 
# inputContent( 
width:400px; 
border:2px solid black; 
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'eah- - Hello World ! ! 





聊天 昵称 : emm 











聊天 内 容 : 


Yeah “Hello World! ! 























11.16 AJAX f£ ifj 
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11.17 AJAX 轮 询 调试 界面 

) 
# nane( 

margin:10px 10px 10px 10px; 
} 
# content ( 


margin:10px 10px 10px 10px; 


) 
</style> 
</head> 
< body> 
« div id= "displayArea"> 
</div> 
< div id= "inputContent"> 
< div id= "name"> 


聊天 昵称 : 

< input type = "text" id= "myName"”/> 
</div> 
< div id= "content"> 

聊天 内 容 : 


< textarea name = "myWords" id= "myWords" cols = "50" rows = "2"></textarea> 
< button onclick = "sendMessage( )"> 发 送 </button> 
</div> 
</div> 
<script> 
var getxhr = new XMLHttpRequest() ; 
var t = setInterval(getMessage, 750); 
function getDateTine( ) ( 
var date 7 new Date(); 
var year = date.getFullYear(); 
var month = date.getMonth(); 
var day = date. getDate(); 
var hour = date.getHours(); 
var minute = date.getMinutes(); 
var second = date.getSeconds(); 
var datestring = year + "-" + month + "-" + day + "" + hour + ":" + 
minute + ":" + second; 
return datestring; 


) 
function sendMessage()( 
var chatName - document. getElementById("myName"). value; 
var chatContent = document. getElementById("myWords"). value; 
var url = "http://1localhost:8088/chatboxPolling/chat. php"; 
var date = getDateTime(); 
var myMessage = ( 
name:chatName, 
content:chatContent, 
datetime:date 
}; 
myMessage = JSON. stringify(myMessage); 
var postxhr = new XMLHttpRequest(); 
postxhr. open("POST" , url, true) ; 
postxhr. setRequestHeader("Content — type", "application/x- www — form- urlencoded"); 
postxhr.send("messageString = ”+ myMessage); 


function getMessage(){ 
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var url = "http://localhost:8088/chatboxPolling/chatfile. txt" ; 
getxhr.onreadystatechange - stateChange; 
getxhr. open( "GET" , url, true); 
getxhr. send() ; 
) 
function stateChange()( 
if (getxhr.readyState -- 4)( 
if (getxhr.status -- 200)( 
var displayArea = document.getElementById("displayArea"); 
displayArea. innerHTML = getxhr.responseText; 
displayArea. scrollTop = displayArea. scrollHeight; 


) 
) 
</script> 
</body> 
</html> 


文件 名 : chat. php 


<?php 
if (isset( $ _POST[ 'messageString']))( 
// 获 取 传人 ISON 数据 
$ rawJSON = $ POST['messageString']; 
// 解 析 数 据 
$0bj = json decode( $ rawJSON) ; 
// 写 人 文件 
$ myfile = fopen("chatfile.txt", "a"); 
$ message = $ obj -> name." ". $ obj -> datetime. "< br />". $ obj — > content. "< br /> 
«br /5"; 
fwrite( $ nyfile, $ message); 
) 
?> 


在 实例 代码 中 ,chat. html 由 一 个 显示 区 域 和 发 送 区 域 组 成 ,页 面 中 的 < style > 定义 了 
页 面 的 风格 样式 。 在 JavaScript 代码 段 中 ,通过 setInterval() 方 法 ,每 隔 一 段 时 间 进 行 数据 
的 获取 ,并 更 新 显示 区 域 。 发 送 消息 区 域 包含 两 个 输入 框 ,在 每 次 单 击 后 ,将 发 送 者 昵称 、 消 
息 内 容 以 及 当前 时 间 ( 通 过 自行 编写 的 getDateTime O 函数 获取 ) 组 成 一 个 JavaScript 对 象 
并 将 其 转换 为 JSON 字符 串 进行 传输 。 

在 chat. php 文件 中 ,将 传人 的 JSON 字符 串 进行 解析 ,并 以 特定 格式 写 入 文本 文件 进 
行 保存 ,注意 与 之 前 实例 中 的 PHP 文件 操作 所 不 同 的 是 ,在 调用 fopen() 方 法 时 ,第 二 个 参 
数 传人 a, 从 而 能 够 不 断 地 写 和 人 同一 个 文本 。 

简单 来 说 ,上 述 聊 天 实例 是 由 11. 2 节 两 个 实例 的 功能 组 合 而 成 ,输入 当前 聊天 的 昵称 
与 聊天 内 容 单 击 “ 发 送 ” 按 钮 ,就 可 以 看 到 显示 区 域 的 内 容 了 。 打 开 调 试 界面 的 Network 选 
项 便 可 以 看 到 每 隔 一 段 时 间 不 断 发 送 的 xhr 类 型 的 HTTP 请 求 ,如 图 11. 17 所 示 。 由 此 ， 
通过 AJAX 轮 询 的 方式 ,可 以 让 页 面具 有 一 定 的 实时 性 。 


11.4. 服务 器 发 送 事件 


通过 AJAX 轮 询 可 以 使 页 面具 有 实时 性 ,但 是 这 种 方法 有 一 个 束 端 , 那 就 是 浏览 器 需 
要 不 断 地 发 送 HTTP 请 求 。 然 而 ,对 于 移动 设备 来 说 ,不 断 地 发 送 HTTP 请 求 可 能 会 额外 
消耗 许多 的 电能 。 为 了 更 有 效 地 传递 信息 ,HTML5 支持 了 服务 器 发 送 事件 (Server-Sent 
Events. SSE). 

由 于 HTTP 协议 本 身 的 无 连接 性 ,服务 器 无 法 做 到 主动 向 页 面 推送 消息 ,只 能 由 页 面 
主动 去 询问 服务 器 是 否 有 新 的 数据 。 然 而 SSE 方法 却 通过 发 送 流 (streaming) 信 息 的 方式 ， 
让 服务 器 不 断 地 向 客户 端 发 送 数据 ,从 而 保持 了 连接 。 这 种 方式 使 得 服务 器 能 够 实时 地 向 
客户 端 发 送信 息 。 

下 面 通过 一 个 简单 的 实例 来 学 习 服务 器 发 送 事件 。 该 实例 由 两 个 文件 组 成 ,分 别 是 
sse. html 和 sse. php ,它们 实现 了 向 页 面 不 断 推送 当前 时 间 信 息 的 功能 ,其 在 浏览 器 中 的 展 
示 效 果 如 图 11. 18 所 示 ,服务器 发 送 事件 的 网 络 传 输 情况 可 以 通过 查看 调试 界面 来 观察 ,如 
图 11.19 所 示 。 


(B) localhost:8088/chatbc. x 





€ a | © localhost:8088/chatboxSSE/sse.html 





Fri, 25 Aug 2017 09:56:22 «0000 
Fri, 25 Aug 2017 09:56:25 «0000 
Fri, 25 Aug 2017 09:56:28 «0000 
Fri, 25 Aug 2017 09:56:31 «0000 
|| Fri, 25 Aug 2017 09:56:34 «0000 
Fri, 25 Aug 2017 09:56:37 «0000 
Fri, 25 Aug 2017 09:56:40 «0000 
Fri, 25 Aug 2017 09:56:43 «0000 
Fri, 25 Aug 2017 09:56:46 «0000 








11.18 SSE 简单 实例 
文件 名 : sse. html 


«! DOCTYPE HTML > 
< html lang = "en- US" 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 
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</head> 

<body> 
< div id= "displayArea"» 
</div> 


< script» 
var source = new EventSource("http://1localhost:8088/chatboxSSE/sse. php") ; 
source. onmessage = function(e)( 
var displayArea = document.getElementById("displayArea"); 
displayArea. innerHTML += e.data + "<br />"; 
}; 
</script> 
</body> 
</html> 


文件 名 : sse. php 


<?php 
header( 'Content - Type: text/event - stream'); 
header( 'Cache - Control: no- cache'); 


$datetime = date("r"); 
echo "data: ( $ datetine)W Wn"; 
flush(); 

?> 
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L] ssephp 200 eventsource Other 3298 6ms ' 
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L] ssephp 200 eventsource Other 3298 7ms 1 
口 sephp 200 eventsource Other 3298 5ms 1 
Ll] ssephp. 200 eventsource Other 3298 6ms 1 
L Lssenhn 200 eventsource Other 3208. Sms| 1 当 








11.19 SSE 调试 界面 


在 这 个 实例 的 HTML 文档 中 ,首先 创建 一 个 EventSource 对 象 实例 ,并 输入 作为 发 送 
端的 服务 器 相应 的 URL。 随 后 为 该 EventSource 对 象 实例 添加 onmessage 事件 监听 处 理 
函数 。 每 当 页 面 接收 到 来 自 服务 器 端的 信息 时 , 则 进行 显示 并 换行 。 


E PHP 文档 中 ,有 些 内 容 需 要 特别 注意 。 首 先是 设置 返回 报 文 的 首部 ,来 告诉 页 面 当 前 
发 送 的 信息 是 流 信息 ,并 不 要 使 用 缓存 信息 。“header('Content Type : text/event-stream") ; "fil 
" header('Cache-Control: no-cache) ;” 完 成 的 就 是 这 个 任务 。 然 后 调用 PHP 的 date() 方 法 
来 获取 当前 日 期 时 间 。 接 着 通过 echo 输出 。 输 出 的 字符 串 需要 以 “data: ”开头 ,相当 于 将 
“data; ”之 后 的 信息 作为 服务 器 发 送 事件 的 data 属性 值 , 即 实 际 报 文 传递 的 内 容 为 data fi 
值 对 。 同 时 需要 将 输出 字符 串 的 结尾 设置 为 "\\n\\n”, 以 此 作为 不 同 信息 的 分 隔 符 。 最 后 
调用 PHP 的 flush() 方 法 ,将 输出 内 容 传递 给 页 面 。 

将 代码 部 署 到 服务 器 后 运行 ,可 以 观察 到 页 面 不 断 地 出 现 来 自 服务 器 传人 的 时 间 信 息 。 
打开 浏览 器 调试 页 面 的 Network 选项 ,可 以 观察 到 每 隔 一 段 时 间 都 有 来 自 服 务 器 类 型 为 
EventSource 的 HTTP 报 文 ,如 图 11. 19 所 示 。 这 样 就 实现 了 服务 器 发 送 事件 ,从 而 将 数据 
作为 流 信 息 不 断 地 传递 给 客户 端 。 

使 用 SSE 的 原理 ,同样 可 以 对 之 前 使 用 AJAX 轮 询 实现 的 聊天 室 进行 改进 ,采用 服务 
器 发 送 事 件 的 方式 ,将 信息 传递 给 客户 端 。 同 样 ,该 实例 中 包含 两 个 文件 ,分 别 是 chatSSE 
.html 与 chatSSE. php, 其 在 浏览 器 中 的 展示 效果 如 图 11. 20 所 示 ,打开 浏览 器 的 调试 界面 
可 以 看 到 当前 实例 的 网 络 通信 状况 如 图 11.21 所 示 。 





€ >C | © localhost:8088/chatboxSSE/chat.html 





饮水 机 2017-7-25 18:26:58 
SFF 错 。。。 








11.20 SSE 聊天 
文件 名 : chatSSE. html 


«! DOCTYPE HTML > 
<html lang = "en 一 US"> 
<head> 
< neta charset = "UTF — 8"> 
«title»«/title» 
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11.21 SSE 聊天 调试 界面 


< style> 

# displayArea( 
width:400px; 
height:300px; 
border:2px solid black; 
overflow- y:scroll; 

) 

# inputContent( 
width:400px; 
border:2px solid black; 

) 

# nane( 
margin:l0px 10px 10px 10px; 

) 

# content( 
margin:lOpx 10px 10px 10px; 

) 

</style> 
</head> 
< body> 
<div id= "displayArea"> 


</div> 
< div id= "inputContent"> 
< div id= "name"> 
聊天 名 称 : 
< input type = "text" id= "myName”/> 
</div> 
<div id= "content"> 


聊天 内 容 : 


< textarea name = "myWords" id= "myWords" cols = "50" rows = "2"></textarea> 


< button onclick = "sendMessage()"> 发 送 </button > 


</div> 


</div> 


<script> 
var getxhr = new XMLHttpRequest(); 


var source = new EventSource("http: //localhost:8088/chatboxSSE/chatSSE. php" ) ; 


source. onmessage = function(e)( 


) 


var displayArea = document.getElementById("displayArea"); 
displayArea. innerHTML = e.data; 
displayArea.scrollTop = displayArea. scrollHeight; 


function getDateTime()( 


var date = new Date(); 

var year 7 date.getFullYear(); 

var month = date.getMonth(); 

var day = date. getDate( ); 

var hour = date.getHours(); 

var minute = date.getMinutes(); 

var second = date.getSeconds(); 

var datestring = year + "—" + month + "-" + day + "" + hour + 


minute + ":" + second; 


} 


return datestring; 


function sendMessage()( 


) 


var chatName = document. getElementById("myName"). value; 
var chatContent = document. getElementById("myWords"). value; 
var url = "http://1localhost:8088/chatboxSSE/chatSSE. php" ; 
var date = getDateTime(); 
var nyMessage - ( 

name:chatName, 

content:chatContent, 

datetime:date 
}; 
myMessage = JSON. stringify(myMessage); 
var postxhr = new XMLHttpRequest(); 
postxhr. open("POST" , url, true) ; 


postxhr. setRequestHeader("Content — type", "application/x- www — form — urlencoded"); 


postxhr.send("messageString - ”+ myMessage); 


«/script» 


</body> 
</html> 


文件 名 : chatSSE. php 


<?php 


header( 'Content - Type: text/event - stream'); 








mlw 
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header( 'Cache - Control: no- cache'); 


$chat - file get contents("chatfile. txt"); 


if (isset( $ POST['messageString']))í 
$ rawJSON = $ POST['messageString']; 
$0bj = json decode( $ rawJSON) ; 
$ myfile = fopen("chatfile.txt", "a"); 
$ message = $ obj-> name." ". $ obj-> datetime. "< br />". $ obj —> content. "< br />< br />"; 
fwrite( $ myfile, $ message); 
) 


echo "data: ( $ chat) Nn"; 
flush(); 
?> 
将 代码 部 署 至 服务 器 后 访问 HTML 文档 , 便 得 到 了 与 之 前 类 似 的 聊天 应 用 。 不 同 的 
是 ,打开 浏览 器 调试 界面 的 Network 选项 ,可 以 看 到 使 用 SSE 的 聊天 应 用 是 由 服务 器 端 不 
断 向 页 面 发 送 数据 ,类 型 为 eventsource。 
总 结 一 下 ,使 用 服务 器 发 送 事 件 SSE 需要 注意 以 下 几 点 : 
° 前 端 页 面 声明 EventSource 对 象 ,并 通过 URL 指定 服务 器 后 端 程序 为 发 送 事件 的 
发 送 者 。 
* 为 新 创建 的 EventSource 对 象 设置 onmessage 事件 监听 。 
。 后 端 设置 HTTP 报 文 首部 并 设置 信息 类 型 为 流 信息 ,不 使 用 缓存 。 
。 通过 “data: “发送 消息 ,以 “\n\n” 为 结尾 分 隔 不 同 信息 。 
。 后 端 将 输出 内 容 发 送 至 前 端 页 面 。 


11.5 WebSocket 


为 了 实现 更 好 的 实时 性 ,之 前 已 经 介绍 了 在 HTTP 协议 基础 上 的 方案 ,分 别 是 轮 询 与 
服务 器 发 送 事件 。 受 限于 HTTP 的 通信 方式 的 无 状态 、 无 连接 性 ,开发 者 难以 高 效 地 建立 
一 个 实时 对 等 的 通信 。 因 此 HTML5 推广 了 WebSocket, 它 是 一 种 在 单个 TCP 连接 上 的 进 
行 的 全 双 工 通信 协议 。 浏 览 器 通过 JavaScript 与 服务 器 建立 WebSocket 连接 之 后 便 可 以 
自由 地 与 服务 器 交换 数据 。 


11.5.1 全 双 工 通信 


WebSocket 是 一 个 全 双 工 (full-duplex 或 double-duplex) 通 信 协 议 。 

ILT. (duplex) , 即 在 两 个 通信 设备 之 间 可 以 有 双向 的 数据 传输 。 全 双 工 则 是 相对 于 半 
双 工 而 言 , 所 谓 半 双 工 (half-duplex) ,是 两 台 通信 设备 可 以 进行 双向 的 数据 传送 ,但 是 一 次 
通信 过 程 只 能 是 一 个 通信 设备 向 另 一 台 发 送 数据 ,而 不 能 同时 进行 两 台 设备 互相 传输 且 接 
收 。 对 讲 机 的 通信 机 制 是 典型 的 半 双 工 通 信和 ,通信 时 只 能 有 一 方 讲话 ,其 他 设备 负责 收听 。 


类 似 地 ,如 今 的 许多 语音 消息 交流 也 是 半 双 工 通信 机 制 。HTTP 请 求 响应 间 的 通信 也 是 半 
双 工 的 ,虽然 客户 端 与 服务 器 都 可 以 向 对 方 发 送 HTTP 报 文 ,但 是 请 求 一 般 只 能 由 客户 端 
发 起 ,随后 等 待 服务 器 的 响应 。 

全 双 工 通信 和 则 是 两 台 通信 设备 可 以 同时 进行 双向 的 数据 传输 , 互 不 影响 。 在 生活 中 , 电 
话 的 通信 方式 就 是 全 双 工 的 ,通信 双方 可 以 同时 讲话 ,进行 数据 传输 。WebSocket 协议 是 
KEF HTTP 协议 的 全 双 工 通信 协议 ,通信 双方 不 再 遵循 一 方 请 求 然后 等 待 对 方 响应 的 模 
式 , 而 是 进行 对 等 的 通信 ,服务 器 与 客户 端 在 建立 连接 后 能 够 保持 连接 , 且 都 可 以 自由 地 向 
对 方 发 送 数据 进行 通信 。 

半 双 工 和 全 双 工 的 通信 过 程 简 图 如 图 11. 22 和 图 11. 23 所 示 。 





mal a 


通信 实体 





图 11.22 半 双 工 通 信 图 11.23 全 双 工 通信 





WebSocket 实现 了 客户 端 与 服务 器 端的 高 效 通信 。 相 比 于 基于 HTTP 协议 的 轮 询 和 
服务 器 发 送 事 件 , WebSocket 协议 在 首部 内 容 大 小 上 有 着 决定 性 的 优势 : 一 个 HTTP 请 求 
的 首部 一 般 高 于 100B 而 WebSocket 协议 的 首部 只 需要 2B。 在 通信 过 程 中 , WebSocket 协 
议 将 可 以 省 去 大 量 的 网 络 传输 与 延迟 。 同 时 , 正 是 因为 全 双 工 通信 机 制 , 通 信 的 双方 不 必 由 
客户 端 不 断 请 求 服务 器 端 进行 数据 的 更 新 ( 轮 询 ) ,或 是 服务 器 端 不 断 地 告知 客户 端 新 的 数 
据 更 新 (服务 器 发 送 事 件 ) ,而 是 即时 地 将 信息 反馈 到 双方 ,WebSocket 的 信息 传输 具有 主 
动 性 。 借 助 WebSocket, 开 发 者 可 以 实现 一 些 实时 性 更 强 的 应 用 ,如 在 线 聊 天 室 、 多 人 游戏 
对 战 等 。 


11.5.2 通信 过 程 
WebSocket 连接 的 建立 首先 需要 向 服务 器 发 送 一 个 HTTP 请 求 ,该 HTTP 报 文 请 求 
服务 器 将 协议 由 HTTP 升级 为 WebSocket。 随 后 ,服务 器 向 客户 端 返回 确认 信息 将 协议 升 


级 为 WebSocket 协议 。 该 HTTP 响应 传 回 HTTP 请 求 

后 ,客户 端 与 服务 器 端 由 此 建立 了 全 双 工 的 iB T 

WebSocket 连接 ,并 实现 对 等 通信 。 最 后 , 当 协议 升级 为 WebSocket 
—À 


使 用 WebSocket 的 通信 任务 结束 后 ,客户 端 与 
服务 器 各 自 关闭 WebSocket 连接 .使 用 | O3 | e— us 
WebSocket 协议 通信 的 过 程 如 图 11. 24 所 示 。 — n p 
由 于 WebSocket 的 通信 过 程 在 应 用 过 程 
需要 许多 复杂 的 服务 器 后 端 代 码 的 支持 ,这 些 
内 容 超出 了 本 书 的 范围 。 有 兴趣 的 读者 选择 图 11. 24  WebSocket 通信 过 程 
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一 个 后 端 环境 然后 自行 搜索 WebSocket 相关 库 ,来 实现 一 个 及 时 通信 应 用 。 本 节 的 实例 将 
使 用 websocket. org 所 提供 的 echo 服务 实现 前 端 WebSocket 的 连接 建立 、 断 开 以 及 信息 的 


发 送 。 实 例 代码 如 下 ,其 在 浏览 器 中 的 展示 效果 如 图 11. 25 所 示 ,打开 浏览 器 的 调试 界面 可 
以 观察 到 通信 的 具体 报 文 ,如 图 11. 26 所 示 。 


@ localhost8088/Websc x 
€ > Q |O localhost&088/WebSocket.html 


[ames | ri 


[Hello World 发 送 
| eean... 

Hello World 

ERNA. 














11.25 WebSocket 简单 实例 











[x É] | Elements Console Sources Network Performance Memory Application > x 
@ G m w | Vew E ç Ø Groupby frame | (Ü Presevelog E Disable cache | @ Offine No thro 
[Fiter ] 目 Regex © Hide data URLs 
图 xen Js css img Media Font Doc WS Manifest Other 
5000 ms 10000 ms 15000 ms 20000 ms 25000 ms 300 
Name A (Status — Type Initiator | Size — Ti. | Waterfall 20005 
websocket WebSocket. — 0B 1. ` ——— Mun 


[DD echo.websocket.org: 101 


L] WebSockethtmi 304 document Other 1548 3. 











2 requests | 154 B transferred | Finish: 26.77 s | DOMContentLoaded: 70 ms | Load: 66 ms 


11.26 WebSocket 建立 连接 调试 界面 


文件 名 : WebSocket. html 


«! DOCTYPE HTML > 
<html lang = "en - US"> 
<head> 
«meta charset = "UTF - 8"> 
«title»«/title» 
</head> 
< body> 
< button onclick = "openConnection()"»1]Jf 3& HE«/ button > 
< button onclick = "closeConnection()"> 断 开 连 接 </button > 
<br /><br /> 
< input id= "message" type = "text" /»« button onclick = "sendMessage( )"> 发 送 </button> 
<div id= "displayArea"> 
</div> 
<script> 
var ws; 
function openConnection()( 
ws = new WebSocket("wss://echo. websocket. org") ; 
var displayArea = document. getElementById("displayArea"); 
ws.onopen = function(e)( 
displayArea. innerHTML += "连接 建立 ..." + "<br />"; 
} 
ws.onmessage = function(e){ 
displayArea. innerHTML += e.data + "<br V"; 
} 
ws.onclose = function(e)( 
displayArea. innerHTML += "连接 断 开 ..." + "<br />"; 
) 
) 
function closeConnection()( 
ws.close(); 
) 
function sendMessage() ( 
var msg = document. getElementById(" message"). value; 
ws. send(msg) ; 
) 


</script> 

</body> 

«/htnl > 

这 个 实例 的 页 面 内 ,包括 两 个 按钮 作为 WebSocket 连接 打开 与 关闭 的 控制 ,一 个 输入 
框 与 发 送 按钮 组 合 来 进行 信息 发 送 ,以 及 一 个 < div > 标签 来 显示 WebSocket 连接 状态 和 服 
务 器 所 返回 的 信息 。 由 于 我 们 所 指定 的 WebSocket 服务 只 为 echo, 即 输出 传人 信息 ,所 以 
在 运行 该 实例 时 ,每 次 通过 输入 框 发 送信 息 后 ,都 会 看 到 来 自 服务 器 的 反馈 。 

在 代码 中 ,通过 创建 一 个 WebSocket 对 象 实例 来 实现 WebSocket 连接 的 建立 。 在 创建 
的 过 程 中 ,需要 指定 WebSocket 服务 ,传人 形 如 “ws://echo. websocket. org” 的 字符 串 。 其 
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中 “ws://” 代 表 通 信 的 协议 为 WebSocket,“wss://” 则 为 在 WebSocket 基础 上 的 加 密 安全 
协议 。 每 次 WebSocket 连接 的 建立 都 会 向 服务 器 端 发 送 HTTP 请 求 升 级 协议 ,然后 服务 
器 端 返回 升级 协议 的 响应 。onopen 事件 在 每 次 收 到 来 自 服务 器 端的 协议 升级 确认 后 被 触 
发 ,在 实例 中 ,指定 该 事件 的 处 理 函 数 输出 显示 当前 WebSocket 连接 已 建立 。 打 开 浏 览 器 
的 调试 界面 的 Network 选项 后 ,进行 WebSocket 的 连接 测试 , 便 可 以 看 到 升级 协议 的 
HTTP 报 文 , 单 击 可 查看 报 文 详情 。 

在 输入 框 内 输入 信息 后 , 单 击 “ 发 送 ” 按 钮 触发 sendMessage() 函 数 。 在 这 个 函数 中 , 通 
过 所 创建 的 WebSocket 对 象 实例 的 send() 方 法 进行 数据 的 发 送 , 并 将 所 发 送 的 信息 作为 参 
数 传人 。 在 发 送 数据 后 ,服务 器 端 会 将 所 传送 的 数据 返回 来 ,所 以 需要 添加 一 个 onmessage 
事件 来 对 消息 传人 进行 监听 。onmessage 事件 在 每 次 新 的 数据 传人 后 被 触发 ,在 实例 中 ,将 
传人 的 消息 输出 至 显示 区 < div >。 

当 结 束 WebSocket 通信 时 ,只 需 调 用 WebSocket 对 象 实例 的 close() 方 法 , 即 可 实现 
WebSocket 连接 的 关闭 。 与 连接 的 打开 类 似 , 连 接 的 关闭 也 可 以 设置 事件 监听 ,onclose 监 
Wr WebSocket 连接 的 关闭 。 在 实例 的 onclose 事件 处 理 函 数 中 ,在 < div > 显示 区 输出 连接 
已 断 开 的 消息 。 


11.6 Fetch 


之 前 介绍 了 AJAX 用 来 解决 异步 数据 传输 的 问题 。 然 而 如 果 没 有 相关 的 库 函 数 , 使 用 
XMLHttpRequest 仍然 是 一 件 十 分 费力 的 工作 ,事件 驱动 与 回调 函数 也 会 降低 代码 的 可 读 
PE. Fetch API 可 以 说 是 XMLHttpRequest 的 替代 品 , 它 的 接口 简洁 易 懂 ,同时 以 Promise 
对 象 为 基础 让 获取 网 络 资源 的 异步 操作 代码 同步 化 。 其 中 Promise 对 象 是 ECMAScript 6 
所 提供 的 异步 操作 工具 ,不 熟悉 的 读者 可 以 阅读 第 12 章 关 于 Promise 对 象 的 内 容 。 下 面 开 
始 Fetch API 的 学 习 。 


11.6.1 Æ fetch 请 求 


相 比 于 XMLHttpRequest 对 象 ,发 起 fetch 请 求 的 操作 十 分 简便 。 下 面 通过 一 个 简单 
的 实例 来 进行 JSON 数据 和 图 像 数据 的 抓 取 。 该 实例 涉及 三 个 文件 ,分 别 是 主页 面 fetch 
.html 以 及 所 要 获取 的 资源 dogInfo. json 和 dog. jpg。 页 面 中 有 两 个 按钮 , 单 击 后 触发 相应 
的 获取 JSON 数据 与 获取 图 片 资源 的 处 理 函 数 ,该 实例 在 浏览 器 中 的 展示 效果 如 
图 11.27 和 图 11. 28 所 示 。 

文件 名 : fetch. html 


<! DOCTYPE HTML > 

< html lang = "en- US" 

<head> 
< meta charset = "UTF — 8"> 
«title»«/title» 

</head> 

<body> 
<hl > 抓 取 一 个 狗 子 图 片 和 简介 </hl > 





@ localhost8088/fetch/^- x 














< C Q localhost:8088/fetch/fetch.html 


抓 取 一 个 狗 子 图 片 和 简介 


获取 图 片 | 获取 简介 





图 11.27 fetch 图 片 


@ localhost:8088/fetch/^- x 





€ > C |O localhost:8088/fetch/fetch.html 





抓 取 一 个 狗 子 图 片 和 简介 


获取 图 片 | | 获取 简介 


橡皮 
金毛 大 


饮水 机 
1010101010101010 





图 11.28 fetch 简介 
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< button onclick = "getImg()"> 获 取 图 片 </button > 
< button onclick = "getInfo()"> 获 取 简 介 </button > 
<br /><br /> 
<div id= "displayArea"»«/div» 
«script» 
var displayArea = document.getElementById("displayArea"); 
function getInfo()( 
var url = "http://localhost:8088/fetch/dogInfo. json"; 
fetch(url) 
. then( function( response) { 
if (response. ok) ( 
response. json( ). then(function(data)( 
displayArea. innerHTML += "<br />" + data.petName + "<br />"; 
displayArea. innerHTML += data.petKind + "<br />"; 
displayArea. innerHTML += data.petOwner + "<br />"; 
displayArea. innerHTML += data.tel + "<br /»"; 
n; 
Jelse( 
displayArea. innerHTML = "不 好 意思 ,没有 狗 子 的 信息 "; 
} 
}).catch(function(error){ 
console. log(error); 
ni 
) 
function getImg()í 
var url = "http://1localhost:8088/fetch/dog. jpg"; 
var img = document.createElement(" img"); 
fetch(url) 
. then(function(response)( 
return response. blob(); 
n 
. then( function(blob)( 
var imgURL = URL.createObjectURL(blob); 
img.src - imgURL; 
n 
. catch(function(error)( 
console. log(error); 
n; 
displayArea. appendChild( img); 
) 
</script> 
</body> 
</html> 


文件 名 : doglnfo. json 


("petNane" : " f Ez", "petKind" :" & & &", "petOwner" :" 饮 水 机 ","tel" :"1010101010101010") 


在 这 个 实例 中 , 当 单 击 * 获 取 简 介 ” 按 钮 时 触发 getInfo() 函 数 , 在 该 函数 中 执行 fetch 请 
求 。 观 察 代 码 , 可 以 发 现 fetch 的 使 用 十 分 简单 。 只 需 一 个 所 要 获取 资源 的 URL. 即 可 , 然 
后 fetch 方法 会 返回 一 个 Promise 对 象 ,并 将 fetch 执行 后 的 Response 对 象 进行 返回 ,在 
then 语句 中 可 以 获取 这 个 Response 对 象 。 需要 注意 的 是 ,fetch() 方 法 执行 后 返回 的 
Promise 对 象 不 会 拒绝 HTTP 的 错误 状态 , 即 都 会 返回 一 个 状态 为 resolved 的 Promise 对 
象 。 在 判断 fetch 执行 结果 时 ,只 需 判 断 Response 对 象 的 状态 即 可 ,其 中 Response 对 象 的 
OK 作为 只 读 属性 ,表明 了 fetch() 方 法 执行 后 是 否 收 到 正确 的 HTTP 响应 。 对 返回 的 
Response 对 象 进行 状态 判断 后 , 若 响应 正确 则 调用 json() 方 法 ,将 Response 对 象 的 内 容 解 
析 为 JSON 并 返回 。 在 下 一 个 then 请 句 中 , 便 可 以 对 这 个 JavaScript 对 象 进行 输出 显示 。 

可 以 看 到 使 用 基于 Promise 对 象 的 fetch() 方 法 ,可 以 链 式 地 返回 Promise 对 象 来 实现 
异步 操作 的 同步 化 代码 编写 。 类 似 地 , 当 使 用 fetch() 方 法 获取 图 像 时 ,返回 的 Response 对 
象 包含 这 个 图 片 的 流 信息 。 然 后 调用 blob() 方 法 ,将 Response 对 象 的 body 部 分 ( 即 所 要 
获取 的 图 片 信息 ) 转 化 为 blob 对 象 后 返回 。 接 着 在 下 一 个 then 请 句 中 ,将 这 个 blob 对 象 转 
换 为 URL 格式 ,然后 对 应 到 新 创建 的 < img > 标签 的 url。 进 而 将 新 创建 的 < img > 标签 添加 
到 < div > 显示 区 ,至 此 便 完成 了 图 片 的 获取 并 显示 。 

可 以 看 出 , 相 比 于 使 用 XMLHttpRequest 对 象 ,使 用 fetch() 方 法 可 以 顺序 地 进行 代码 
逻辑 的 编写 ,而 不 是 设置 事件 监听 来 监测 返回 报 文 。Fetch API 的 使 用 十 分 简便 ,不 依赖 库 
函数 ,依然 可 以 轻松 地 实现 以 前 XMLHttpRequest 对 象 的 相关 功能 。 另 外 ,fetch() 方 法 的 错 
误 处 理 也 十 分 方便 ,只 需 在 最 后 添加 catch 语句 对 抛 出 的 错误 进行 捕获 即 可 进行 错误 处 理 。 


11.6.2 自 定义 请 求 参数 


使 用 fetch() 方 法 直接 传人 URL ,会 构造 一 个 简单 的 使 用 GET 方法 的 HTTP 报 文 , 通 
过 所 指定 的 URL 对 资源 进行 获取 。fetch() 方 法 的 本 质 与 XMLHttpRequest 对 象 相同 ,都 
是 构造 一 个 HTTP 报 文 在 后 台 进 行 数据 的 传输 ,以 实现 异步 。 至 于 HTTP 报 文 的 具体 细 
节 , 可 以 通过 设置 fetch() 方 法 的 备 选 init 对 象 来 设置 。 下 面 以 之 前 的 获取 图 片 的 getImg() 
函数 为 例 学 习 如 何 自 定义 fetch() 方 法 的 请 求 参 数 。 


function getIng()( 
var url = "http://1localhost:8088/fetch/dog. jpg"; 
var img = document. createElement(" img"); 


var myInit -( 
method: 'GET', 
mode: 'same — origin', 
credentials: 'same - origin' 

}; 

fetch(url,nyInit) 

. then(function(response)( 
return response. blob(); 

n 

. then(function(blob)( 
var imgURL = URL.createObjectURL(blob); 
img.src - imgURL; 

n 
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.catch(function(error){ 
console. log(error); 
D; 
displayArea. appendChild( img); 
} 


在 代码 中 ,创建 了 一 个 myInit 对 象 实例 ,并 设置 了 其 中 一 些 可 选 的 属性 ,并 将 该 对 象 作 
为 参数 与 URL 一 起 传人 fetch() 方 法 。 在 上 面 的 实例 中 , 选 了 一 些 属性 做 了 自 定义 设置 。 
其 中 method 属性 作为 设置 HTTP 请 求 的 使 用 方法 ,默认 使 用 的 GET 方法 ,在 之 后 
的 11.6.3 节 中 ,我 们 将 使 用 POST 方法 。mode 属性 定义 了 请 求 的 模式 , 它 可 以 是 跨 域 的 
cors, 也 可 以 是 同 源 的 same-origin。 这 里 由 于 图 片 资源 位 于 同 域 , 故 使 用 same-origin。 

在 设置 fetch() 方 法 传人 参数 时 ,尤其 需要 注意 的 是 ,使 用 fetch() 方 法 发 送 的 HTTP 
请 求 默认 是 不 包括 cookie 的 。 即 在 自 定义 的 属性 中 ,credentials 属性 默认 是 omit。 如 果 需 
要 发 送 cookie. credentials 属性 必须 进行 设置 , 除 omit 之 外 可 选 参数 是 include 和 
same-origin。 在 执行 跨 域 请 求 时 , 需 将 其 设置 为 include, 如 果 只 涉及 同 域 资源 只 需 设 置 为 
same-origin。 

除了 为 fetch0) 方 法 设置 自 定义 参数 外 ,还 可 以 通过 自 定义 Request 对 象 并 传人 fetch() 
方法 ,来 实现 相同 的 自 定义 HTTP 报 文 相关 参数 的 功能 。 


function getImg()( 
var img = document. createElement(" img"); 


var url = "http://localhost:8088/fetch/dog. jpg"; 
var nyInit = ( 

method: 'GET', 

mode: 'same — origin', 

credentials: 'same- origin' 


}; 
var myRequest = new Request(url,myInit); 


fetch(myRequest) 

. then(function(response)( 
return response. blob(); 

n 

. then(function(blob)( 
var imgURL = URL.createObjectURL(blob); 
img.src = imgURL; 

n 

.catch(function(error)( 
console. log(error); 

D; 

displayArea. appendChild( img); 

) 


上 述 代 码 通过 构造 Request 对 象 , 并 传人 与 之 前 相同 的 参数 ,包括 所 要 获取 资源 的 


URL 以 及 HTTP 具体 细节 设置 相关 的 init 对 象 。 类 似 地 ,init 对 象 为 可 选 参数 。 然 后 在 调 
用 fetch() 方 法 时 传人 所 构造 的 Request 对 象 即 可 。 这 种 方式 与 之 前 调用 fetch() 方 法 并 传 
A URL 和 init 对 象 的 方式 最 后 的 实现 效果 相同 。 


11.6.3 发 送 数 据 


除了 使 用 GET 方法 向 服务 器 端 请 求 资源 外 ,还 可 以 通过 Fetch API 进行 数据 的 异步 发 
送 。 下 面 这 个 实例 介绍 如 何 自 定义 fetch() 方 法 异步 地 向 服务 器 发 送 数据 。 实 例 包括 两 个 
文件 ,分 别 是 sendData. html 和 sendData. php。 实 例 页 面 中 有 一 个 输入 框 和 "发 送 ”按钮 ， 
单 击 “ 发 送 ” 按 钮 后 ,数据 将 交 由 PHP 文件 处 理 。PHP 文件 将 会 把 数据 保存 为 文本 文件 。 
该 实例 在 浏览 器 中 的 展示 效果 如 图 11. 29 所 示 。 打 开 浏 览 器 的 调试 界面 可 以 观察 到 使 用 
fetch() 方 法 发 送 数据 时 的 报 文 通信 情况 ,如 图 11. 30 所 示 。 





€ > C [O localhost8088/fetch/sendData.html 














Fewo — — —— [Ie 











图 11.29 fetch 发 送 数据 
文件 名 : sendData. html 


«! DOCTYPE HTML > 
< html lang = "en- US" 
<head> 
< meta charset = "UTF — 8"> 
<title></title> 
</head> 
<body> 
«div» 
< input id = "message" type = "text" name = "nessage"/^ 
< button onclick = "sendFormData( )"> 提 交 </button> 
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2 requests | 430 B transferred | Finish: 4.08 s | DOMContentLoaded: 14 ms | Load: 11 ms 





11.30 fetch 发 送 数据 调试 界面 


</div> 
< script > 
function sendFormData()( 
var url = "http://1localhost:8088/fetch/sendData. php" ; 
var textInput = document. getElementById("message"). value; 
var myHeaders = new Headers(); 
myHeaders. append( 'Content - Type', 'application/x- www — form - urlencoded'); 
var nyInit = ( 
method: 'POST', 
headers: myHeaders, 
body: 'message = ' + textInput 


) 
fetch(url,myInit); 
) 
«/script» 
</body> 
</html> 


文件 名 : sendData. php 


«?php 
if (isset( $ POST['message']))( 
$nyfile = fopen("test.txt", "w"); 
$ message = $ POST['message']; 
fwrite( $ myfile, $ message); 


?> 


将 代码 部 署 于 服务 器 后 ,运行 实例 。 在 输入 框 内 输入 “Hello World” J , 单 击 “发 送 ” 按 
钮 。 然 后 ,在 同 目录 下 找到 新 创建 的 test. txt 文件 ,打开 即 可 看 见 之 前 所 发 送 的 信息 ,如 
图 11.29 所 示 。 打 开 浏 览 器 的 调试 界面 的 Network 选项 ,再 次 测试 发 送 数 据 即 可 看 到 浏览 
器 发 送 的 类 型 为 fetch 的 HTTP 报 文 ,查看 详情 可 以 看 到 所 传输 的 数据 键 值 对 。 

在 实例 代码 中 ,使 用 11. 5 节 所 采用 的 自 定义 fetch() 方 法 进行 数据 的 发 送 。 与 之 前 不 
同 的 是 ,这 次 创建 了 一 个 Headers 对 象 。Fetch API 除了 提供 Request 对 象 外 ,还 提供 了 
Headers 对 象 的 相关 接口 ,可 以 通过 调用 该 对 象 下 的 append() 方 法 ,传人 所 要 设置 的 属性 和 
属性 值 。 在 实例 中 ,将 HTTP 报 文 的 Content-Type 属性 设置 为 application/x-www-form- 
urlencoded, 即 表明 这 个 报 文 要 向 服务 器 发 送 表 单数 据 。 为 实现 数据 的 传输 ,还 需 在 输入 
fetch( ) 方 法 的 init 对 象 中 将 method. 设置 为 POST 方法 ,并 将 所 要 发 送 的 数据 以 
"'message— '+ textInput” 键 值 对 的 形式 写 入 body 属性 。 这 样 数据 才 被 并 入 自 定义 的 报 
文中 ,调用 fetch 〇 方法 传人 参数 即 可 完成 数据 的 异步 传输 。 

当然 ,fetch 不 止 可 以 发 送 表单 数据 ,也 可 以 传送 blob 对 象 .ArrayBuffer 对 象 等 其 他 形 
式 的 数据 ,其 中 还 需要 对 HTTP 报 文中 的 属性 细节 进行 相应 的 调整 ,请 有 兴趣 的 读者 自行 
搜索 学 习 。 


11.7 J 题 


1. 什么 是 HTTP 协议 ? 客户 端 浏 览 器 和 Web 服务 器 是 怎样 通过 HTTP 协议 通信 的 ? 
2. HTTP 报 文 的 基本 结构 是 怎样 的 ? HTTP 请 求 报 文 和 HTTP 响应 报 文 之 间 有 何 区 
别 ? 
. HTTP 协议 有 什么 特性 ? 
. 什么 是 HTTPS? HTTPS fl HTTP 相 比 有 何 优越 性 ? 
. POST Jrik fl GET 方法 之 间 有 什么 区 别 ? 两 种 方法 分 别 应 用 于 哪 种 场景 ? 
. 简 述 Post/Redire/Get 设计 模式 。 这 样 的 设计 模式 有 怎样 的 作用 ? 
. 什么 是 AJAX? 它 是 否 一 门 编程 语言 或 标准 , 它 又 有 怎样 的 功能 ? 
. AJAX 相 比 于 以 前 的 表单 提交 的 通信 方式 有 何 优 点 ? 
. 仿照 本 章 中 的 聊天 应 用 实例 ,分 别 使 用 表单 提交 、AJAX、SSE 和 fetch 这 几 种 不 同 
的 技术 实现 ,分 析 它 们 各 自 对 于 聊天 应 用 的 实现 效果 。 
10. 试 比较 服务 器 发 送 事 件 SSE 和 AJAX 轮 询 这 两 种 通信 方式 。 
11. 什么 是 WebSocket? 它 相 比 于 服务 器 发 送 事件 SSE 的 优势 在 哪里 ? 
12. 选择 一 门 服务 器 端 语 言 ,并 使 用 WebSocket 协议 ,来 实现 一 个 聊天 应 用 。 
13. 什么 是 半 双 工 通信 和 全 双 工 通信 ? 简 述 它们 各 自 的 通信 过 程 ,并 从 日 常生 活 中 举 
例 说 明 哪些 属于 半 双 工 通信 ,哪些 属于 全 双 工 通信 。 为 什么 ? 
14. 什么 是 fetch? 它 相 比 于 AJAX 技术 有 何不 同 ? 
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在 现实 生活 中 ,并 不 是 每 时 每 刻 都 有 网 络 连接 的 。 有 时 网 络 连接 又 是 似 有 似 无 的 ,比如 
在 户外 在 地 铁 里 等 。 在 这 样 的 条 件 下 打开 浏览 器 ,通常 都 会 遇 到 图 12. 1 所 示 情 况 。 


YT 














无 法 访问 此 网 站 
localhost 拒绝 了 我 们 的 连接 请 求 。 
请 试 试 以 下 办 法 : 

+ 检查 网 络 连 接 

。 检查 代 理 服务 器 和 防火 寺 


ERR CONNECTION REFUSED 


图 12.1 没有 连接 


没有 连接 意味 着 什么 都 没有 ,或 者 在 似 有 似 无 的 连接 下 ,在 无 比 漫长 的 空白 页 下 等 待 着 
一 个 页 面 的 响应 。 显 然 ,这 样 的 用 户 体验 是 极其 不 好 的 。 或 者 是 根本 不 能 获取 所 需 的 服务 ， 
或 者 是 痛苦 的 等 待 。 有 时 ,我 们 所 使 用 的 Web 应 用 并 不 需要 极 高 的 实时 性 。 例 如 ,在 使 用 
天 气 预报 相关 应 用 时 , 当 我 们 在 上 午 访问 获取 到 相应 数据 后 ,当天 的 天 气 信息 就 不 会 有 太 大 
的 变化 了 。 可 是 每 当 在 户外 等 一 些 网 络 连接 不 够 好 的 地 方 时 ,往往 都 需要 再 次 请 求 页 面 (可 
能 得 到 的 是 相同 的 数据 ), 但 是 这 时 浏览 器 里 往往 是 一 片 空白 。 

这 时 ,我们 可 能 会 想 如 果 浏 览 器 记 住 之 前 页 面 请 求 的 结果 该 多 好 ,这 样 就 不 至 于 什么 信 
息 都 获取 不 到 ,或 是 无 比 漫 长 的 等 待 。 另 外 ,网 络 情况 不 好 时 ,在 等 待 请 求 响应 期 间 ,我 们 也 
希望 网 站 可 以 先 呈 现 一 个 页 面 ,而 不 是 一 个 大 白板 和 一 个 进度 条 。 如 果 有 新 的 页 面 传递 过 


来 , 待 刷新 之 后 ,直接 呈现 新 的 页 面 即 可 。 在 网 络 连接 中 断 或 异常 的 情况 下 ,上 述 的 解决 方 
案 是 不 是 要 比 什么 都 没有 更 好 ? 
于 是 ,我 们 需要 Service Worker 来 解决 离线 应 用 所 遇 到 的 相关 问题 。 





12.1 Service Worker 


Service Worker 直译 为 服务 工作 线程 ,本 质 上 是 一 个 Web Worker, 并 在 浏览 器 后 台独 
立 运 行 。 由 于 Web Worker 的 相关 特性 ,Service Worker 并 不 能 操作 页 面 的 DOM, 但 可 以 
与 JavaScript 主线 程 进 行 通信 。 它 的 主要 任务 是 在 浏览 器 客户 端 与 Web 服务 器 之 间 扮 演 
一 个 代理 服务 器 (proxy) 的 角色 。 

如 图 12. 2 所 示 ,Service Worker 是 浏览 器 与 Web 之 间 的 请 求 与 响应 的 一 个 代理 ,来 控 
制 页 面 与 服务 器 之 间 网 络 请 求 的 处 理 方式 。 形 象 地 说 ,Service Worker 是 浏览 器 与 Web 服 
务 器 之 间 的 协调 者 。 开 发 者 可 以 通过 它 来 灵活 地 控制 缓存 与 数据 同步 ,为 用 户 提供 一 个 更 
为 快捷 友好 的 界面 ,屏蔽 掉 浏 览 器 与 Web 服务 器 之 间 通 信 等 待 时 的 卡 顿 ,有 效 地 增强 了 应 
用 的 实时 性 。 让 用 户 在 离线 或 网 络 状况 不 佳 时 ,依然 能 够 获得 良好 的 用 户 体验 ,而 不 是 一 
错误 页 面 或 是 空白 的 等 待 页 面 。 


— 
浏览 器 


Z- NN 


浏览 器 


图 12.2 Service Worker 作为 代理 


























12.2 Service Worker 的 前 景 


由 于 移动 互联 时 代 的 到 来 ,HTML5 应 运 而 生来 解决 新 时 代 的 标准 化 问题 ,以 及 为 越 来 
越 多 的 移动 端 用 户 提供 更 好 的 移动 体验 。 然 而 ,目前 很 明显 的 一 个 现状 是 HTML 标准 还 
不 够 好 , 相 比 于 原生 应 用 有 一 些 目前 尚 无 法 彻底 解决 的 致命 问题 。 
。 对 网 络 有 着 很 强 的 依赖 ,网 络 状况 直接 决定 了 页 面 、 视 频 ,. 音 频 等 资源 的 获取 ,直接 
决定 了 用 户 体 验 。 
。 对 各 种 硬件 设备 的 访问 性 相对 较 差 ,不 能 自由 地 使 用 硬件 资源 。 
由 此 造成 的 现状 是 ,在 各 种 移动 设备 上 ,更 多 用 户 使 用 的 还 是 iOS Andriod 的 应 用 ， 





Service Worker 服务 线程 


HTML5 实用 教程 





相关 的 许多 互联 网 企业 在 面 对 移 动 设备 时 ,索性 就 完全 不 去 考虑 Web 应 用 的 兼容 或 移植 ， 
直接 从 浏览 器 跳 转 到 应 用 下 载 ,让 用 户 下 载 该 应 用 的 iOS 或 Android 版 本 ,来 进行 长 期 的 
使 用 。 

相 比 于 之 前 W3C 推荐 的 Application Cache( 应 用 缓存 ) 机 制 ,Service Worker 更 为 灵 
活 、 更 为 强大 。 二 者 都 是 增强 离线 应 用 体验 的 实验 方案 ,尽管 Application Cache 获得 了 市 
面 几 乎 所 有 主流 浏览 器 的 支持 ,但 随 着 时 间 的 推移 ,2014 年 起 草 的 Service Worker 越 来 越 被 看 
好 而 成 为 主流 。 尽 管 Service Worker 目前 的 浏览 器 支持 情况 有 限 , 尚 不 支持 Safari 浏览 器 。 

所 以 本 章 将 Service Worker 作为 离线 应 用 的 解决 方案 ,主要 讲解 Service Worker 在 拦 
截 和 处 理 网 络 请 求 的 应 用 场景 。Service Worker 标准 本 身 在 实验 阶段 ,未 来 它 可 能 是 浏览 
器 端 Web 应 用 进步 的 主要 方向 ,与 此 相 结合 的 还 有 本 地 存储 解决 方案 ,它们 都 会 使 Web 应 
用 更 加 接近 于 原生 应 用 ,不 断 扩展 Web 应 用 的 跨 平台 特性 。 


12.3 Service Worker 的 生命 周期 


在 具体 使 用 Service Worker 之 前 ,需要 大 致 了 解 Service Worker 的 生命 周期 ,如 图 12. 3 


所 示 。 
W Fetch 


=| Install = JActivated-—= Idle |-4——] Push/Message 


For 


图 12.3 ServiceWorker 生命 周期 
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首先 需要 注意 的 是 ,由 于 Service Worker 控制 和 处 理 用 户 的 HTTP 请 求 与 响应 ,为 了 
防止 用 户 的 请 求 与 响应 被 恶意 地 支持 ,Service Worker 必须 在 相对 安全 的 环境 下 进行 ,所 以 
它 只 能 在 HTTPS 下 使 用 。 除 此 之 外 的 特例 就 是 与 本 地 服务 器 localhost 通信 时 ,Service 
Worker 也 可 以 使 用 。 对 于 本 章 内 的 测试 代码 ,需要 在 服务 器 环境 下 测试 。 

由 图 12. 3 可 知 , Service Worker 首先 由 一 个 主页 面 注册 (Register), 并 指定 一 个 
JavaScript 文件 作为 Service Worker 的 脚本 代码 段 ,同时 指定 Service Worker 的 作用 域 , 在 
之 后 的 运行 中 ,Service Worker 就 会 对 指定 域内 的 请 求 进行 处 理 , 超 出 域 范围 的 网 络 请 求 会 
被 视 为 正常 请 求 ,不 会 经 过 Service Worker, 而 直接 发 送 至 网 络 。 

如 果 一 个 Service Worker 没有 注册 过 或 者 是 Service Worker 的 JavaScript 代码 段 出 现 
更 改 ,就 会 进行 到 下 一 步 , 进 行 安装 (install) 并 激活 (activate) 。 这 样 在 本 地 浏览 器 的 缓存 中 
就 存在 最 新 版 本 的 Service Worker 了 ,在 网 络 状况 不 佳 或 离线 状态 下 都 有 这 样 一 个 Service 
Worker 代码 段 副本 来 为 页 面 提供 服务 。 当 每 一 次 注册 Service Worker 时 ,浏览 器 都 会 将 
其 与 之 前 版 本 的 Service Worker 进行 比较 , 若 出 现 更 改 就 暂时 注册 并 安装 一 个 新 的 Service 





Worker, 并 将 其 置 为 等 待 状态 。 最 后 一 个 相关 页 面 关闭 后 ,到 再 次 打开 时 ,之 前 处 于 等 待 中 
的 Service Worker 就 会 被 激活 ,完成 Service Worker 的 更 新 。 

在 激活 的 事件 被 触发 后 ,需要 通过 Cache API 来 动态 地 对 相关 页 面 的 请 求 和 响应 进行 
缓存 。 在 之 后 页 面 发 出 请 求 时 ,就 会 触发 fetch 事件 ,在 fetch 内 可 以 对 新 请 求 与 已 缓存 的 
请 求 进行 比 对 来 确定 一 次 请 求 是 否 被 缓存 过 ,如 果 有 就 直接 返回 已 缓存 的 响应 ; 如 果 没 有 
就 去 网 络 中 去 抓 取 , 并 将 新 的 请 求 与 响应 对 记录 下 来 ,以 便 之 后 使 用 。 

需要 注意 的 是 ,上 述 的 Service Worker 的 一 个 生命 周期 过 程 将 作为 本 章 测 试 代码 的 具 
体 执行 流程 。 可 以 发 现 ,这 其 中 没有 涉及 消息 的 传递 (Push/Message) 和 终止 线程 
CTerminate) ,请 有 兴趣 的 读者 自行 搜索 学 习 。 而 在 Service Worker 使 用 过 程 中 ,可 能 有 些 
读者 会 对 其 中 的 一 些 概念 产生 疑问 , 故 在 12. 10 节 和 12. 11 节 简 要 介绍 其 中 所 涉及 的 
Promise Xf £ „Cache API 的 相关 基础 知识 。 另 外 对 于 Fetch API 相关 知识 ,本 书 的 第 11 章 
中 有 所 介绍 ,请 有 疑问 的 读者 查阅 。 

同时 需要 注意 的 是 ,上 述 的 缓存 过 程 是 一 种 可 能 的 缓存 方案 , 它 有 一 些 问题 和 局 限 。 
12. 9 节 将 给 出 其 他 几 种 可 供 选 择 的 缓存 方案 进行 讨论 ,但 不 进行 代码 实现 。 


12.4 本章 实例 代码 


本 章 的 主要 实例 是 一 个 简单 的 离线 应 用 缓存 演示 ,其 中 包括 三 个 文件 ,分 别 是 主页 面 
index. html 负责 注册 Service Worker,service-worker. js 为 Service Worker 线程 代码 ,以 及 
anotherDog. html 作为 一 个 新 的 未 缓存 的 页 面 。 本 章 实例 的 主要 功能 是 : 在 第 一 次 加 载 
index. html 时 注册 一 个 Service Worker 并 缓存 相应 资源 , 当 出 现 新 的 从 未 缓存 过 的 请 求 
时 ,从 网 络 获取 请 求 的 响应 ,并 将 其 添加 入 缓存 中 ,以 便 之 后 使 用 时 缓存 命中 。 该 实例 需要 
在 服务 器 环境 下 测试 。 

文件 名 : index. html 


<!DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF — 8"> 
< title» Service Worker </title> 
< link rel = "stylesheet" href = "style.css"/» 


</head> 
<body> 
< hl > 这 是 一 个 狗 子 </hl > 
< div class = "area"» 
< ing src = "doge. jpg" /> 
<a href = "anotherDog. html"> 这 里 有 另 一 个 狗 子 </a> 
</div> 
<script> 
//register 注册 
if ('serviceWorker' in navigator){ 
navigator. serviceWorker 
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.register('. /service- worker. js', (scope: '. /'}) 
. then(function(registration)( 
console. log("Service Worker Registered"); 
n 
. catch(function(err)(í 
console. log("Service Worker Failed to Register", err); 
n; 
) 
</script> 
</body> 
</html> 


文件 名 : service-worker. js 


// 缓 存 内 容 
var cacheName = 'vl- myDog'; 
var filesToCache = [ 
', f index. htnl', 
'. /style.css', 
'. /doge. jpg' 
E 
//Install 安装 
self.addEventListener('install', function(e)( 
console. log('[ServiceWorker] Installed'); 
e. waitUntil( 
caches. open(cacheName) . then( function(cache)( 
console. log('[ServiceWorker] Caching cacheFiles'); 
return cache. addAll(filesToCache); 
n 
); 
ni 
//activate 激活 
self.addEventListener('activate', function(e)( 
console. log('[ServiceWorker] Activated'); 
e. waitUntil( 
caches. keys( ) . then(function(cacheNames)( 
return Promise. all(cacheNames. map( function(thisCacheName)( 


if (thisCacheName !-- cacheName)( 
console. log ( '[ServiceWorker] Removing Cached Files from Cache - ', 
thisCacheName); 
return caches. delete(thisCacheName); 
} 
n 
n 
) 
Dn; 
//£etch 


self.addEventListener( 'fetch',function(e)( 


console. log('[ServiceWorker] Fetch', e.request.url); 


e. respondWith( 
caches. match(e. request) 
. then( function( response) { 

// 如 果 出 现 缓存 命中 , 则 显示 已 缓存 的 信息 

if (response)( 
console. log("[ServiceWorker] Found in Cache", e.request.url, response); 
return response; 

) 

// 如 果 缓 存 没有 命中 , 则 去 fetch 新 的 页 面 

console. log("No data is found in cache and about to fetch from the Network..." ) ; 

var requestClone = e.request.clone(); 

return fetch(requestClone) 
. then(function(response)( 


var responseClone - response.clone(); 
// 并 将 新 的 请 求 和 响应 添加 到 缓存 中 
caches. open(cacheName) . then( function(cache){ 
cache. put(e. request, responseClone); 
console. log('[ServiceWorker] New Data Cached', e. request. url); 
ni 
// 将 新 的 请 求 的 响应 返回 
return response; 
n 
. catch(function(err)( 
console. log('[ServiceWorker] Error Fetching & Caching New Data', 


err); 


n; 
文件 名 : anotherDog. html 


<! DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF — 8"> 
<title> 另 一 个 狗 子 </title> 
< link rel = "stylesheet" href = "style.css" /> 
</head> 
<body> 
< hl > 这 是 另 一 个 狗 子 </hl > 
<div> 
< img src = "anotherDog. jpg"/> 
</div> 
</body> 
</html> 
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12.5 Register 注册 


一 般 在 应 用 的 首页 中 ,需要 先 注册 一 个 Service Worker, 使 其 能 够 为 指定 域内 的 资源 提 
供 代理 服务 。 这 样 , 当 用 户 请 求 域内 的 资源 时 ,就 会 有 一 个 在 浏览 器 后 台独 立 运 行 的 服务 工 
作 线 程 来 负责 处 理 用 户 的 请 求 与 响应 ,以 及 收发 消息 ,从 而 行使 其 职责 ,提升 用 户 的 离线 应 
用 体验 。 

在 index. html 页 面 内 的 JavaScript 代码 段 中 ,对 Service Worker 进行 注册 。 


//register 注册 
if ('serviceWorker' in navigator)( 
navigator. serviceWorker 
. register('. /service - worker. js', (scope: '. /')) 
. then(function(registration)( 
console. log("Service Worker Registered"); 
ua function(err)( 
console. log("Service Worker Failed to Register", err); 
Di 

) 

首先 通过 条 件 语句 判断 浏览 器 是 否 支持 Service Worker. Service Worker 位 于 
navigator 对 象 下 。 如 果 浏 览 器 支持 Service Worker, 那 么 通过 navigator. serviceWorker 的 
register 方法 对 其 注册 。 注 册 时 需要 传人 两 个 参数 : 第 一 个 参数 是 当前 所 注册 的 Service 
Worker 的 代码 文件 , 即 Service Worker 程序 本 身 ; 另 一 个 参数 则 是 该 Service Worker 的 控 
制 域 ,这 意味 着 在 Service Worker 创建 之 后 ,所 有 处 于 该 页 面 内 的 资源 都 可 以 受到 Service 
Worker 的 控制 ,并且 只 有 域内 的 资源 受到 该 Service Worker 的 控制 。 

Service Worker 中 大 量 的 方法 都 是 异步 过 程 , 且 采用 Promise 对 象 , 若 异步 操作 成 功 则 
执行 then 内 的 程序 ,失败 则 由 catch 来 接收 并 进行 错误 处 理 。 在 这 个 实例 中 ,分 别 在 
register 方法 执行 成 功 和 失败 后 语句 中 在 控制 台 输 出 相应 的 信息 。 

将 文件 部 署 至 服务 器 运行 后 ,可 以 看 到 相应 的 页 面 ,如 图 12. 4 所 示 ; 打开 浏览 器 的 调 
试 界面 ,在 控制 台 可 以 看 到 预先 设 定 的 注册 成 功 信 息 , 如 图 12.5 所 示 。 选 择 Application 下 
的 Service Workers 选项 , 即 可 查看 当前 运行 的 Service Worker 线程 状态 ,如 图 12. 5 右 侧 所 
示 。 第 一 次 注册 Service Worker 后 , 便 会 在 浏览 器 中 注册 唯一 的 一 个 线程 。 在 Service 
Worker 代码 段 本 身 不 变 的 前 提 下 ,虽然 每 次 加 载 页 面 都 会 执行 register 方法 进行 注册 ,但 
使 用 的 却 是 同一 个 Service Worker, 

除了 在 浏览 器 调试 界面 可 以 进行 Service Worker 的 管理 外 ,Chrome 浏览 器 也 提供 了 
另 一 种 方式 。 在 域名 输入 框 内 输入 “chrome://serviceworker-internals/”, 也 可 以 进入 一 个 
界面 ,通过 这 个 界面 对 所 有 在 该 浏览 器 中 注册 的 Service Worker 进行 管理 和 调试 ,该 页 面 
内 有 每 个 Service Worker 更 为 详细 的 信息 ,如 图 12.6 所 示 。 





€ > C [O localhost:8088/ServiceWorker/ 








这 是 一 个 狗 子 





图 12.4 index 页面 
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12.5 调试 界面 内 的 Service Worker 注册 信息 





Service Worker 服务 线程 





HTMLS AHE 
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回 Open DevTools window and pause JavaScript execution on Service Worker startup for debugging. 





Registrations in: CAUsersNSONYVAppDataV ocalGoogleVChromelUser Data Default (5) 


Scope: http//localhost:B0BB/ServiceWorker/ 


Installation Status: ACTIVATED 
Running Status: STOPPED 
Fetch handler existence: EXISTS 

Script: http.//localhost-B08B/ServiceWorker/service-worker js 
Version ID: 227 

Renderer process ID: 0 
Renderer thread ID: -1 
DevTools agent route ID: -2 





图 12.6 Chrome 调试 Service Worker 


12.6 Install 安装 


当 Service Worker 完成 register 注册 之 后 , 便 会 触发 一 个 install 事件 , 即 安装 。 这 时 可 
以 将 该 应 用 下 需要 的 文件 进行 提前 缓存 。 在 service-worker. js 文件 中 ,定义 了 全 局 变量 组 


存 空间 命名 以 及 通过 数组 保存 的 文件 路 径 。 


// 缓 存 内 容 
Var cacheName = 'vl- myDog'; 
var filesToCache = [ 
'. /index. html', 
'. /style.css', 
', /doge. jpg" 
E 
//1nstall 安装 
self.addEventListener('install', function(e)( 
console. log('[ServiceWorker] Installed'); 
e.waitUntil( 
caches. open(cacheName) . then( function(cache)( 
console. log('[ServiceWorker] Caching cacheFiles'); 
return cache. addAll(filesToCache); 
n 
); 
Di 


通过 监听 install 事件 ,可 以 进行 资源 的 缓存 工作 。 在 执行 缓存 的 过 程 中 ,应 用 到 了 
Cache API, 它 向 开发 者 提供 了 浏览 器 中 的 一 个 长 期 存储 空间 ,可 以 将 浏览 器 向 Web 发 出 的 
请 求 与 响应 成 对 地 进行 存储 。 实 现 离线 应 用 缓存 的 过 程 , 即 是 在 连接 网 络 的 条 件 下 将 浏览 
器 的 请 求 响应 缓存 起 来 , 当 用 户 处 于 离线 状态 下 或 是 网 络 状 况 不 佳 时 ,直接 返回 给 用 户 而 不 
完全 依赖 于 新 的 请 求 和 响应 。 

Cache API 中 的 操作 也 都 是 异步 操作 ,为 了 保证 在 install 事件 处 理 函 数 中 完成 缓存 相 
关 的 操作 ,避免 出 现 缓存 处 理 操作 执行 耗费 较 长 时 间 而 install 事件 处 理 提前 结束 的 窒 境 ， 
这 里 需要 使 用 install 事件 的 waitUntil 方法 ,在 其 中 进行 缓存 相关 操作 。 

通过 caches 对 象 的 open 方法 ,为 当前 Service Worker 提 
供 一 块 存储 空间 cache, 在 其 中 输入 存储 空间 命名 作为 参数 ,在 
open 执行 成 功 之 后 ,再 调用 cache 对 象 的 addAll 方法 ,将 之 前 
的 需 缓存 文件 路 径 数组 作为 参数 传人 ,并 返回 。 这 样 便 完 成 了 cache 
应 用 下 相关 文件 的 预先 缓存 。 这 里 需要 注意 的 是 ,这 个 过 程 涉 
及 两 个 对 象 , 分 别 是 caches 和 cache, 二 者 属于 包含 关系 caches 
对 象 代表 所 有 的 cache 组 成 的 集合 ,而 cache 则 是 caches 下 一 
个 独立 的 存储 单元 ,关系 如 图 12.7 所 示 。 图 12.7 caches 和 cache 

第 一 次 载 人 页 面 Service Worker 完成 注册 后 , 便 会 触发 
install 事件 。 在 上 述 实例 中 ,在 install 事件 处 理 函 数 中 ,编写 了 一 些 请 求 响应 对 的 缓存 以 及 
相关 状态 信息 的 控制 台 输 出 。 通 过 调试 界面 查看 控制 台 , 便 可 以 看 到 相关 操作 完成 的 状态 
信息 输出 ,如 图 12. 8 所 示 。 
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Service Worker Registered Lindex):21 
[ServiceWorker] Installed service-worker.js:10 
[ServiceWorker] Caching cacheFiles service-worker.1s:13 
[ServiceWorker] Activated service-worker.1s:20 


> 








图 12.8 第 一 次 加 载 后 的 控制 台 信息 


可 以 看 到 ,控制 台中 显示 了 预先 编写 好 的 提示 信息 。 我 们 同时 可 以 在 浏览 器 调试 界面 
进行 cache 缓存 的 管理 。 选 择 Application 下 的 Cache Storage 选项 ,就 可 以 对 已 缓存 的 请 
求 与 响应 对 进行 管理 。 管 理工 具 的 记录 相对 于 实际 可 能 有 滞后 ,在 使 用 Cache Storage 管理 
工具 前 ,请 先 通过 右键 快捷 菜单 选择 对 Cache Storage 进行 刷新 , 即 可 查看 并 管理 当前 的 缓 
存 。 如 图 12.9 所 示 。 

在 当前 实例 中 ,可 以 看 到 Cache Storage 内 有 已 创建 的 缓存 集合 v1-myDog 以 及 当前 域 
信息 ,缓存 内 容 即 为 install 事件 处 理 函 数 中 的 相应 缓存 文件 。 
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12.9 Cache Storage 管理 工具 


12.7 Activate 激活 


在 第 一 次 加 载 页 面 的 周期 中 ,完成 触发 install 事件 之 后 ,就 会 触发 activate 事件 。 
activate 事件 发 生 在 运行 前 ,为 Service Worker 提供 了 更 新 缓存 的 机 会 。 同 时 ,在 之 后 每 次 
打开 页 面 进行 Service Worker 的 注册 时 ,浏览 器 都 会 比 对 Service Worker 的 代码 是 否 发 生 
变化 ,如 果 其 代码 发 生 了 变化 , 则 新 的 Service Worker 线程 即 进 入 等 待 。 在 当前 域 下 的 全 
部 页 面 关闭 后 , 青 次 运行 时 ,之 前 处 于 等 待 状态 的 Service Worker 线程 就 会 替代 之 前 的 线 
程 成 为 当前 运行 的 Service Worker。 

在 上 述 实例 中 ,为 activate 激活 事件 编写 的 处 理 函数 主要 完成 如 下 功能 : 当 通过 缓存 命 
名 更 新 缓存 集 版 本 时 ,自动 删 去 之 前 版 本 的 缓存 集 , 从 而 实现 版 本 的 更 蔡 。 


//activate 激活 
self.addEventListener('activate', function(e)( 
console. log('[ServiceWorker] Activated'); 
e. waitUntil( 
caches. keys(). then(function(cacheNames)( 
return Promise. all(cacheNames. map( function(thisCacheName)( 
if (thisCacheName !-- cacheName)( 
console.log( '[ServiceWorker] Removing Cached Files from Cache - ', 
thisCacheName); 
return caches. delete(thisCacheName); 


在 activate FPF AYA BB ER Ir ,首先 在 事件 触发 时 通过 控制 台 输 出 提示 信息 ,然后 使 用 
waitUntil 方法 保持 当前 事件 的 处 理 状 态 ,并 进行 相对 耗 时 的 异步 操作 。 在 执行 的 异步 操作 
中 ,使 用 caches 对 象 的 keys() 方 法 ,返回 当前 Cache Storage 的 所 有 缓存 集 名 称 组 成 的 数 
组 。 操 作成 功 后 ,执行 then 内 语句 ,并 传人 所 生成 数组 。 

随后 调用 JavaScript 中 数组 对 象 的 map() 方 法 对 数组 进行 重 构 ,由 于 Cache Storage 中 
的 缓存 集 的 名 字 按 创建 时 间 依 次 排列 , 则 索引 为 0 的 数组 项 即 为 之 前 的 缓存 集 名 。 故 在 之 
后 的 函数 中 ,thisCacheName 变量 即 指 代 之 前 缓存 集 命 名 。 通 过 对 之 前 缓存 命名 与 当前 全 
局 变量 cacheName 进行 比 对 来 确定 缓存 版 本 是 否 更 新 , 若 更 新 则 调用 caches 对 象 的 delete 
方法 ,对 之 前 版 本 的 缓存 集 进行 删除 。 

继续 之 前 的 实例 测试 ,此 时 将 缓存 集 命名 由 'vl-myDog' 改 为 'v2-myDog' ,并 刷新 页 面 ， 
观察 调试 界面 内 的 Service Worker 管理 工具 , 便 可 以 看 到 一 个 处 于 等 待 中 的 Service 
Worker 线程 ,如 图 12. 10 所 示 。 
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li Manifest 目 Offine 目 Update on reload (Ü Bypass for network (Ü Show all 
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P BB Local Storage. Received 2017/8/15 E^F104618 
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PÈ Cookies 


Clients http//localhost:8088/ServiceWorker/ focus 


Cache 
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BB Application Cache 


Frames 
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图 12.10 更 新 缓存 集 版 本 


此 时 ,虽然 新 版 本 的 Service Worker 已 经 就 绪 ,但 还 未 变 成 真正 运行 中 的 Service 
Worker。 这 时 ,可 以 通过 关闭 所 有 页 面 重新 运行 ,或 直接 单 击 管理 工具 的 skipWaiting 让 新 
线程 运行 。 随 后 ,我 们 便 可 以 通过 缓存 管理 工具 看 到 缓存 集 版 本 的 更 新 ,如 图 12. 11 所 示 ， 
以 及 控制 台中 已 删除 之 前 版 本 缓存 集 的 提示 信息 ,如 图 12. 12 所 示 。 由 此 一 个 新 的 Service 
Worker 线程 便 可 以 蔡 代 之 前 的 线程 继续 使 用 了 ,实现 了 一 个 激活 的 过 程 。 

值得 注意 的 是 ,一 些 浏览 器 有 自己 的 缓存 机 制 ,对 于 一 些 JavaScript 文件 会 进行 组 
存 , 这 也 就 造成 了 有 些 时 候 对 JavaScript 代码 进行 改动 之 后 ,并 没有 任何 效果 。 这 是 因为 
浏览 器 可 能 使 用 的 还 是 之 前 的 JavaScript 代码 。 解 决 这 种 问题 的 方式 ,通常 是 在 浏览 器 
工具 内 进行 缓存 清除 ,或 者 对 于 本 书 运行 实例 中 所 推荐 使 用 的 Chrome 浏览 器 来 说 ,可 以 
先 按 F12 键 进入 调试 界面 ,进行 图 12.13 所 示 的 操作 ,在 刷新 按钮 处 右 击 ,选择 清空 缓存 
刷新 。 
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12.12 控制 台 更 新 缓存 集 
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图 12.13 清空 内 存 刷新 


或 者 在 调试 工具 中 ,选择 Application 选项 下 的 Clear storage 工具 进行 缓存 的 清除 ,如 
图 12. 14 所 示 。 
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12.14 Clear storage 工具 


12.8 Fetch 


完成 了 Service Worker 的 register 注册 , install 安装 , activate 激活 后 ,一 个 Service 
Worker 就 可 以 投入 使 用 了 。 它 作为 一 个 独立 于 主页 面 的 服务 线程 ,为 用 户 与 Web 之 间 的 
请 求 响应 提供 代理 服务 。 本 节 的 主要 内 容 即 是 关于 其 代理 服务 的 。 

在 实例 中 ,我 们 编写 的 Service Worker 所 提供 的 代理 服务 主要 为 : 

CD 车 用 户 发 出 的 请 求 在 缓存 中 有 存储 记录 , 则 直接 为 用 户 提供 已 有 的 响应 ,而 不 通过 
网 络 进行 相关 页 面 的 请 求 。 

D 若 用 户 发 出 的 请 求 在 缓存 中 没有 存储 记录 , 则 向 Web 服务 器 发 出 请 求 ,返回 该 请 
求 的 响应 ,并 将 新 的 请 求 响应 对 存 人 Cache Storage 中 ,以 便 之 后 使 用 。 


//fetch 
self.addEventListener( 'fetch', function(e)( 
console. log('[ServiceWorker] Fetch', e.request.url); 
e. respondWith( 
caches. match(e. request) 
. then( function( response) { 
// 如 果 出 现 缓存 命中 , 则 显示 已 缓存 的 信息 
if (response)( 
console. log("[ServiceWorker] Found in Cache", e. request. url, response); 
return response; 


) 第 
// 如 果 缓 存 没有 命中 , 则 去 fetch 新 的 页 面 12 
console. log("No data is found in cache and about to fetch from the Network..."); = 





Service Worker 服务 线程 


HTML5 实用 教程 


var requestClone = e.request.clone(); 
return fetch(requestClone) 
. then(function(response)( 


var responseClone - response.clone(); 
// 并 将 新 的 请 求 和 响应 添加 到 缓存 中 
caches. open(cacheName) . then( function(cache)( 
cache. put(e. request, responseClone); 
console. log('[ServiceWorker] New Data Cached', e.request. url); 
D; 
// 将 新 的 请 求 的 响应 返回 
return response; 
n 
. catch(function(err)( 
console. log('[ServiceWorker] Error Fetching & Caching New Data', 
err); 


n; 


在 Service Worker 代码 中 添加 fetch 事件 的 监听 。 每 一 次 fetch 事件 对 应 着 浏览 器 向 
Web 发 出 HTTPS 请 求 , 请 求 相 应 的 网 络 资源 。 通 过 fetch event 的 respondWith() 方 法 ,我 
们 为 每 一 次 的 请 求 自 定义 返回 内 容 , 让 一 些 请 求 不 必 发 出 ,而 直接 返回 本 地 缓存 资源 。 

调用 caches 对 象 的 match() 方 法 ,将 当前 fetch 事件 的 请 求 与 已 缓存 的 请 求 进行 比 对 ， 
TE then 内 语句 中 判断 是 否 有 已 缓存 好 的 响应 response。 如 果 有 , 则 直接 返回 已 缓存 的 响 
应 ; 如 果 用 户 所 请 求 的 资源 之 前 并 未 缓存 过 , 则 返回 一 个 fetch, 让 浏览 器 向 Web 发 出 请 求 
并 等 待 响应 。 在 fetch 方法 的 成 功 处 理 的 then 语句 内 ,编写 代码 将 新 的 请 求 响应 对 存储 至 
缓存 空间 内 ,以 便 之 后 使 用 。 通 过 caches 对 象 打开 相应 的 缓存 集 , 并 调用 缓存 集 对 象 cache 
的 put 方法 ,将 新 的 请 求 与 响应 作为 参数 传人 。 至 此 便 完 成 了 新 的 HTTPS 的 请 求 与 响应 
对 的 存储 。 当 下 一 次 再 请 求 这 些 资 源 时 ,用 户 便 可 以 通过 缓存 来 获取 ,而 不 用 真 的 发 出 一 次 

对 于 上 述 实 例 而 言 ,index. html, doge. jpg 和 style. css 资源 作为 已 缓存 资源 , 当 再 次 加 
载 相应 页 面 时 ,浏览 器 就 不 会 真 的 向 本 地 服务 器 请 求 页 面 ,而 是 直接 返回 Cache Storage 中 
的 HTTPS 请 求 响应 ,如 图 12.15 所 示 。 在 控制 台中 ,可 以 看 到 之 前 在 代码 中 编写 的 提示 信 
息 ,显示 页 面 当前 的 响应 来 自 缓 存 ,如 图 12.16 所 示 。 类 似 地 , 当 没 有 网 络 连 接 时 ,或 是 无 法 
与 本 地 服务 器 建立 连接 时 ,用 户 依 然 可 以 看 到 页 面 , 而 不 是 像 以 前 那样 只 是 一 个 提示 错误 信 
息 的 网 页 。 

同时 ,也 可 以 在 浏览 器 的 调试 界面 的 Network 选项 中 查看 请 求 与 响应 的 来 源 ,可 以 看 
到 Service Worker 扮演 了 一 个 代理 的 角色 ,对 用 户 的 请 求 与 响应 进行 控制 ,如 图 12. 17 
所 示 。 








€ > Q [O localhost8088/ServiceWorker/ 
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图 12.15 离线 状态 下 加 载 页 面 
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© | top v | [Filter Default levels Y 你 
[ServiceWorker] Fetch http://localhost :8088/Servicekorker/ service-worker. js:34 

[ServiceWorker] Found in Cache http://localhost:8088/ServiceWorker/ P Response vice worker. isi 
[ServiceWorker] Fetch http://localhost:8088/ServiceWorker/style.css service-worker,is:34 
[ServiceWorker] Fetch http://localhost:8088/ServiceWorker/doge.ipg service-worker.is:34 
[ServiceWorker] Found in Cache http://localhost:8088/ServiceWorker/style.css P Response service-worker. 15:49 
[ServiceWorker] Found in Cache http://localhost:8088/ServiceWorker/doge.ipg P Response service-worker. 15:40 
Service Worker Registered locelhost/:21 
[ServiceWorker] Fetch http://localhost:8088/ServiceWorker/. service-worker. 15:34 
[ServiceWorker] Fetch hitp://localhost:8088/ServiceWorker/style.css service-worker. 15:34 
[ServiceWorker] Found in Cache http://localhost:8088/ServiceWorker/ P Response service-worker. 15:40 
[ServiceWorker] Found in Cache http://localhost:8088/ServiceWorker/style.css P Response service-worker. 15:40 
12.16 控制 台 界 面 显示 缓存 命中 

[X Ó] | Elements Console Sources Network Performance Memory Application Security Audits 15x 

@ | Toggle device toolbar Ctrl Shift M | Group by frame | (9 Preserve log E Disable cache | (Ü Offline No throtting Y 

[Fter — JE Regex © Hide data URLs 图 xum IS CSS img Media Font Doc WS Manifest Other 

10000 ms. 20000 ms 30000 ms 40000 ms 50000 ms 60000 ms 70000 ms 80000 ms sooo] 

Name Stet. Type | Initiator — Sce Time |Waterall 。 50000 ms 1054 

[LI Service Worker 200 docum.. Other (from ServiceWorker) 48 ms [ 

Ll stylecss. 200  stylesh.. (index (from ServiceWorker) 19 ms 

la] dogejpg 200 jpeg — (nded (from ServiceWorker) 18 ms 

L] e service-workerjs 200 javascri.. service-wo.. (from disk cache) 4 ms 








图 12.17 Network 管理 工具 页 面 查看 请 求 响应 
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在 index. html 页 面 中 ,有 一 个 超级 链接 指向 一 个 不 曾 被 缓存 过 的 资源 。 当 单 击 这 个 链 
接 时 ,Service Worker 首先 会 试图 在 Cache Storage 中 寻找 请 求 响应 对 ,由 于 这 个 页 面 之 前 
并 未 被 缓存 过 ,所 以 这 次 浏览 器 就 会 向 Web 发 出 请 求 ,并 返回 来 自 Web 服务 器 的 响应 结 
果 , 如 图 12.18 所 示 。 对 于 当前 实例 ,Service Worker 同时 会 把 新 的 请 求 响应 对 保存 到 缓存 
中 ,当下 次 再 进行 相同 的 访问 时 ,就 可 以 直接 从 缓存 中 读 取 响 应 结果 。 在 控制 台 界 面 中 ,我 
们 便 可 以 看 到 之 前 所 编写 的 提示 信息 ,显示 出 上 述 的 过 程 , 如 图 12. 19 所 示 。 





c | © localhost:8088/ServiceWorker/anotherDog.html 图 *| %4 om :| 


这 是 另 一 个 狗 子 














12.18 新 的 页 面 未 被 缓存 ,从 Web 中 获取 











© | top v | Filter Default levels Y 1 fiters | @ 
[ServiceWorker] Fetch http://localhost:8088/ServiceWorker/style.css service-worker.is:34 
[ServiceWorker] Fetch nttp://localhost:8088/ServiceWorker/anotherDog.ipg service-worker.s:34 
[ServiceWorker] Found in Cache http://localhost:8088/ServiceWorker/style.css service-worker.s:40 
y Response (type: "basic", uri: 

"http: //LocaLhost:8088/Servicekorker/style.css", redirected: false, status: 200, ok: true, ~} 

No data is found in cache and about to fetch from the Network... service -worker .js:44 
[ServiceWorker] New Data Cached nttp://localhost:8088/ServiceWorker/anotherDog. ipg service-worker.s:53 

> 











图 12. 19 在 请 求 新 的 页 面 之 后 的 控制 台 信息 


刷新 Cache Storage 存储 工具 .也 可 以 看 到 新 的 请 求 响应 对 被 保存 到 缓存 中 , 如 
图 12. 20 所 示 。 


R ú Elements Console “Sources Network Performance Memory Application Security Audits ix 





Application 
Bl Manifest 
Y Service Workers ° — vice 
Ë Clear storage 1 http;//localhost8088/ServiceWorker/anotherDog jpg 
2 http;/localhost&088/ServiceWorker/doge jpg OK 
Storage 3 http;/localhost:B088/ServiceWorker/index html ok 
4 http;/localhost&088/ServiceWorker/style.css OK 





> B8 Local Storage. 
P BE Session Storage 


Cache 
v Ë Cache Storage. 


88 v2-myDog - htpy/localhosl 
EE Application Cache 


Frames 
* 口 top 











c 
图 12.20 Cache 管理 工具 显示 新 的 请 求 响应 被 缓存 
同样 也 可 以 查看 调试 界面 中 的 Network 选项 来 对 页 面相 关 资 源 的 请 求 与 响应 进行 检 
测 与 调试 ,可 以 看 出 之 前 未 缓存 过 的 页 面 已 被 缓存 。 当 浏览 器 进行 页 面 请 求 时 ,直接 返回 已 
存储 的 响应 ,如 图 12. 21 所 示 。 








[w Ó] | Elements Console Sources Network Performance Memory Application Security Audits x 
@ G | m w | view SZ = Ø Groupbyframe | Ü) Preservelog E Disablecache | (Ü Offline Nothrotting Y 
[iter ]E) Regex C) Hide data URLs 图 | xe IS CSS Img Media Font Doc WS Manifest Other 

5000 ms 10000 ms 15000 ms 20000 ms 25000 ms 30000 ms 35000 ms 
Name Stat. Type Initiator | Size Time |Watefall 500.00 ms 1004 
[L] anotherDog.htmi 200 docum... Other (from SeviceWorker) 78 ms Ë 
L] style.css 200  stylesh.. anotherDo.. (from ServiceWorker) 10 ms | Í 
IB] anotherDogjpg 200 jpeg — anotherDo.. (from ServiceWorker) 24 ms 
C © anotherDog jpg 200 jpeg Other 137K8 4ms||l| 
[| 6 service-workerjs 200  javascri. service-wo.. (from diskcache) 1ms 














12.21 Network 调试 界面 观察 到 新 的 界面 已 被 缓存 


12.9 缓存 策略 


本 章 主 要 讲解 的 实例 的 缓存 模式 是 以 缓存 为 主 。 如 果 缓 存 空间 内 没有 相应 资源 , 则 向 
Web 发 出 请 求 ,并 将 新 的 请 求 响应 对 添加 到 缓存 空间 中 。 显 然 , 这 样 的 策略 是 诸多 可 行 策 
略 的 一 种 。 它 是 提高 用 户 离线 应 用 的 体验 可 行 的 解决 方案 之 一 ,能 够 让 用 户 尽快 地 从 缓存 





Service Worker 服务 线程 


HTML5 实用 教程 





中 获得 所 需 的 资源 。 然 而 ,这 样 的 模式 也 有 不 可 避免 的 棘 端 。 这 个 模式 会 对 同一 资源 可 能 
出 现 的 改动 视而不见 ,因为 同一 个 请 求 的 资源 只 会 从 缓存 中 获取 ,而 不 是 使 用 最 新 的 资源 。 
这 样 的 策略 对 于 几乎 不 会 产生 变动 的 资源 或 应 用 十 分 有 效 ,而 对 于 其 他 频繁 更 新 的 资源 却 
捉襟见肘 。 为 了 提升 Web 应 用 的 离线 使 用 体验 ,开发 者 不 仅 需要 根据 应 用 类 型 的 不 同 进行 
不 同 策略 的 选择 ,而 且 还 需 根 据 具体 的 情况 和 场景 来 应 用 。 

离线 应 用 的 缓存 策略 通常 有 以 下 几 种 模式 ,分 别 是 缓存 优先 其 次 网 络 (cache First. 
then network) ,网 络 优先 、 其 次 缓存 (network first. then cache) , 仅 用 缓存 (cache only) , 仅 
用 网 络 (network only) ,缓存 与 网 络 竞争 (cache and network race) 以 及 缓存 然后 网 络 (cache 
then network) 。 这 几 种 策略 仅 是 大 致 的 方向 ,各 自 专 长 于 不 同类 型 的 应 用 。 在 实际 中 ,也 
可 以 结合 使 用 。 

接 下 来 详细 介绍 这 几 种 缓存 策略 的 执行 过 程 与 应 用 场景 ,并 辅 以 图 示 ,图 示 中 以 序号 标 
注 出 大 致 的 逻辑 顺序 。 


12.9.1 ERA ARAH 
缓存 优先 .其 次 网 络 的 缓存 策略 简 图 如 图 12. 22 所 示 。 


Page — ÉL. ~ 
Service UNS 
= 
1. 执行 过 程 


如 果 网 络 请 求 可 以 在 缓存 中 找到 响应 , 则 使 用 缓存 内 的 响应 ; 若 没有 , 则 向 Web 发 出 

2. 应 用 场景 

缓存 优先 、 其 次 网 络 模式 适合 于 一 个 以 离线 为 主 的 应 用 ,其 中 应 用 的 主要 功能 可 离线 完 
成 ,网 络 可 以 对 应 用 进行 辅助 。 这 样 的 策略 对 于 应 用 中 不 常 变 动 的 资源 效果 相当 于 仅 用 组 
存 , 而 对 于 偶尔 不 能 被 本 地 缓存 满足 的 需求 则 需要 向 Web 发 出 请 求 。 本 章 的 实例 应 用 的 即 
是 这 个 缓存 策略 。 在 实际 的 应 用 (诸如 文档 编辑 ,在 线 制作 相关 应 用 等 ) 中 ,实现 应 用 主要 功 
能 的 资源 都 可 以 保存 到 缓存 中 ,而 其 他 有 关 服 务 器 上 传 或 下 载 新 资源 的 需求 , 则 可 通过 网 络 
来 实现 。 


12.9.2 网 络 优先 、 其 次 缓存 


网 络 优先 、 其 次 缓存 的 缓存 策略 简 图 如 图 12. 23 所 示 o 
1. 执行 过 程 
在 有 网 络 连接 的 情况 下 ,始终 通过 网 络 获取 请 求 的 响应 。 当 没有 网 络 连 接 时 ,使 用 缓存 











图 12.22 缓存 优先 .其 次 网 络 
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12.23 网 络 优先 .其 次 缓存 





来 满足 需求 。 

2. 应 用 场景 

与 上 一 个 策略 相对 应 ,网 络 优先 、 其 次 缓存 的 模式 通常 意义 上 是 一 个 网 络 相 关 应 用 , 需 
要 频繁 地 获取 新 的 内 容 , 而 当 失去 网 络 连接 时 ,再 使 用 缓存 内 的 资源 。 这 样 的 模式 可 以 很 好 
地 提升 用 户 离线 体验 ,例如 ,新 闻 资 讯 类 应 用 ,即便 失去 网 络 连接 也 可 以 浏览 最 近 的 新 闻 ; 
天 气 预 报应 用 ,在 失去 网 络 时 ,用 户 通过 已 缓存 的 资源 也 可 能 获得 当天 或 近期 的 天 气 预 报信 
息 , 等 等 ; 几乎 所 有 的 应 用 都 可 以 用 这 种 方式 来 提升 应 用 的 离线 体验 ,即便 对 于 那些 对 网 络 
需求 很 高 的 应 用 ,也 可 以 提供 一 个 已 缓存 好 的 页 面 或 小 应 用 供用 户 消 遗 。 比 如 在 使 用 
Chrome 浏览 器 时 ,没有 网 络 连接 时 就 可 以 玩 一 个 小 游戏 ,如 图 12. 24 所 示 。 





CG | © www.baidu.com 








HI 00069 00049 
GAME ONER 





未 连接 到 互联 网 


请 试 试 以 下 办 法 : 
。 检查 网 线 、 调 制 解 调 器 和 路 由 器 
* 重新 连接 到 Wi-Fi 网 络 
。 运行 Windows 网 络 诊断 


ERR_INTERNET_DISCONNECTED 


图 12.24 Chrome 小 游戏 


12.9.3 KARG 
仅 用 缓存 的 缓存 策略 简 图 如 图 12. 25 所 示 。 12 
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12.25 仅 用 缓存 


1. 执行 过 程 

只 使 用 缓存 ,而 不 向 Web 发 出 任何 请 求 。 

2. 应 用 场景 

仅 用 缓存 的 模式 ,对 于 经 常 使 用 且 不 会 出 现 变 动 或 很 少 出 现 变 动 的 资源 效果 很 好 。 对 
于 这 些 相对 来 说 处 于 “静态 ”的 资源 ,最 好 的 模式 就 是 在 Service Worker 进行 install 时 ,就 
将 它们 保存 至 缓存 空间 ,在 使 用 时 直接 使 用 缓存 即 可 ,十 分 高 效 。 例 如 ,应 用 的 主体 框架 、 应 
用 的 风格 样式 .应 用 的 UI 设计 等 相关 资源 ,它们 使 用 频繁 ,同时 ,又 不 经 常 改 变 或 是 几乎 不 
出 现 变动 ,所 以 适合 于 仅 用 缓存 模式 。 


12.9.4 仅 用 网 络 
仅 用 网 络 的 缓存 策略 简 图 如 图 12. 26 所 示 。 
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图 12.26 仅 用 网 络 


1. 执行 过 程 

只 使 用 网 络 ,从 不 使 用 缓存 。 

2. 应 用 场景 

仅 用 网 络 , 即 不 使 用 缓存 ,这 种 缓存 策略 通常 在 一 些 即时 性 要 求 较 高 或 是 对 网 络 要 求 较 
高 的 应 用 中 采用 。 由 于 没有 了 网 络 连接 ,应 用 的 主要 功能 就 无 从 实现 ,所 以 就 不 需 使 用 组 
存 。 例 如 ,视频 直播 应 用 、 在 线 对 战 游戏 等 ,没有 了 网 络 ,应 用 的 功能 无 从 实现 ,也 就 无 须 使 
用 缓存 。 


12.9.5 缓存 与 网 络 竞争 

缓存 与 网 络 竞争 的 缓存 策略 简 图 ,如 图 12. 27 所 示 。 

1. 执行 过 程 

向 Web 发 出 请 求 与 向 缓存 空间 发 出 匹配 请 求 同 时 进行 ,页面 显示 最 先 获取 的 响应 。 通 
常情 况 下 ,缓存 资源 会 率先 显示 。 
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12.27 缓存 与 网 络 竞争 














2. 应 用 场景 

缓存 与 网 络 竞 争 的 模式 适用 于 一 些 较 小 的 资源 ,使 用 这 种 模式 可 以 将 资源 最 快 地 呈现 
给 用 户 ,提供 更 为 流畅 的 体验 。 这 对 于 兼容 一 些 对 本 地 缓存 资源 访问 缓慢 的 设备 是 一 个 不 
错 的 选择 。 然 而 这 样 的 竞争 存在 一 个 不 太 好 解决 的 问题 , 当 所 请 求 的 资源 经 常 出 现 变 动 时 ， 
开发 者 有 时 需要 耗费 额外 的 精力 来 解决 资源 前 后 不 一 致 的 问题 。 


12.9.6 缓存 然后 网 络 
缓存 然后 网 络 的 缓存 策略 简 图 如 图 12. 28 所 示 。 
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图 12.28 缓存 然后 网 络 


1. 执行 过 程 
向 Web 发 出 请 求 与 向 缓存 空间 匹配 请 求 同 时 进行 ,然后 页 面 使 用 从 缓存 空间 获得 的 响 
应 ,随后 来 自 Web 的 响应 再 对 缓存 空间 进行 更 新 替代 。 
2. 应 用 场景 
缓存 然后 网 络 的 模式 适用 于 那些 资源 更 新 频繁 的 应 用 ,例如 社交 网 站 、 新 闻 资 讯 应 用 
等 。 这 种 模式 的 优点 在 于 : 很 好 地 实现 了 数据 的 实时 性 的 同时 避免 了 数据 不 一 致 的 问题 。 
另外 ,缓存 然后 网 络 的 模式 非常 适合 于 为 移动 端 设备 提供 更 好 的 用 户 体验 。 移 动 端 设备 经 
常 处 于 有 或 没有 网 络 连接 的 中 间 状 态 , 常 常 有 信号 但 是 效果 不 佳 ,这 时 如 果 单 纯 地 依赖 网 
络 , 则 会 出 现 用 户 长 时 间 等 待 请 求 响应 的 情况 ,这 在 信号 不 佳 的 情况 下 是 一 件 十 分 痛苦 的 事 
情 。 而 缓存 然后 网 络 的 模式 便 可 以 一 边 先 为 用 户 缓 存 内 容 , 然 后 一 边 等 待 来 自 Web 的 响 
应 ,当成 功 获得 响应 时 ,由 Service Worker 对 缓存 资源 进行 更 新 ,并 不 影响 当前 用 户 的 使 第 
用 。 等 到 用 户 再 次 发 出 请 求 时 , 即 可 以 显示 最 新 的 资源 内 容 。 12 
章 
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12.10 Promise 对 象 简介 


在 Service Worker 的 相关 应 用 中 ,不断 地 会 涉及 Promise 对 象 的 处 理 , 其 中 包括 使 用 组 
存 资源 .向 Web 发 出 请 求 等 。 本 节 将 会 对 Promise 对 象 进 行 简单 的 讲解 ,以 帮助 读者 更 好 
地 理解 Service Worker 的 相关 代码 。 在 实际 开发 中 , 比 起 创建 Promise 对 象 , 开 发 者 往往 会 
更 频繁 地 使 用 其 他 API 所 返回 的 Promise 对 象 ,所 以 作为 开发 者 最 好 对 于 Promise 对 象 的 
相关 知识 有 一 个 相对 清晰 的 认识 。 

Promise 直译 为 “承诺 ”, 结 合 其 应 用 场景 就 不 难看 出 其 命名 用 意 。 在 许多 Web 应 用 
中 ,许多 操作 并 不 像 简单 代码 执行 那样 一 条 一 条 地 执行 ,而 是 异步 操作 (asynchronous 
operation) 。 所 谓 的 异步 操作 ,往往 是 一 个 独立 于 主线 程 的 、 耗 时 相对 较 长 且 不 确定 具体 完 
成 时 间 的 操作 ,例如 ,在 网 页 中 加 载 一 个 图 片 、 向 Web 发 出 一 次 请 求 等 待 响 应 等 。 对 于 这 类 
异步 操作 ,不 确定 何 时 结束 也 不 确定 是 否 会 出 错误 ,给 出 一 个 “承诺 ”来 处 理 这 些 可 能 的 情况 
是 Promise 使 用 的 目的 。 

Promise 对 象 是 一 个 较 新 的 ECMAScript6 标准 的 一 部 分 ,但 其 已 获得 了 大 部 分 主流 浏 
览 器 厂商 的 支持 ,并 被 作为 处 理 异 步 操作 的 推荐 方法 。 开 发 者 通过 Promise 可 以 更 清晰 、 便 
捷 地 处 理 一 些 异步 操作 。 


12.10.1 回调 函数 与 Promise 


在 Promise 对 象 出 现 以 前 ,只 能 使 用 回调 函数 (callback function) 来 处 理 Web 应 用 中 一 
些 异步 操作 ,该 方法 在 本 书 的 其 他 章节 都 有 涉及 。 回 调 函 数 ,在 异步 操作 的 语 境 下 ,简单 地 
可 以 理解 为 ,按照 类 似 变量 赋值 的 方法 指定 一 个 函数 去 完成 某 个 任务 ,但 是 这 个 任务 并 不 是 
马上 就 要 开始 ,只 有 当 某 些 条 件 被 满足 时 , 才 真 正 去 调用 这 个 回调 函数 来 对 具体 的 情况 进行 
处 理 。 典 型 的 过 程 就 是 进行 一 些 事 件 的 监听 , 当 某 事件 被 触发 时 ,调用 这 个 事件 的 处 理 函 
数 , 即 调用 回调 函数 。 

例如 下 面 的 这 个 实例 是 一 个 加 载 图 片 的 过 程 , 它 使 用 了 回调 函数 ,该 实例 在 浏览 器 中 的 
展示 效果 如 图 12. 29 Bra 。 

文件 名 : 图 片 的 加 载 . html 


<! DOCTYPE HTML > 
< html lang = "en- US"> 
<head> 
< meta charset = "UTF — 8"> 
«title»«/title» 
</head> 
<body> 
<div id= "displayArea"></div> 
<script> 
var displayArea = document. getElementById("displayArea"); 
function loadImage( imgSrc, parent) ( 
var img = document.createElement(" img"); 


img. src = imgSrc; 


img. onload = function()( 
alert(" 图 片 加 载 成 功 !"); 
}; 
parent. appendChild( img) ; 
) 
loadImage("doge. jpg", displayArea); 
</script> 
</body> 
</html> 
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此 网 页 显示 : 
图 片 加 载 成 功 ! 





12.29 图片 的 加 载 使 用 回调 函数 


在 上 面 这 个 实例 中 ,由 于 将 图 片 从 磁盘 加 载 到 浏览 器 中 要 耗费 相当 长 的 时 间 , 相 对 于 代 
码 的 顺序 执行 是 一 个 异步 操作 ,我 们 添加 了 一 个 对 于 onload 事件 的 监听 ,来 获知 一 个 图 片 
是 否 加 载 成 功 ,并 在 加 载 成 功 时 调用 回调 函数 来 弹出 提示 信息 。 

使 用 回调 函数 的 方式 ,在 上 面 的 实例 中 看 上 去 十 分 简洁 ,但 对 于 越 来 越 丰 富 广 泛 的 应 用 
而 言 , 使 用 回调 函数 处 理 起 来 会 十 分 吃力 。 其 主要 不 足 如 下 : 

CO 对 于 错误 处 理 灵活 度 有 限 ,尤其 是 对 于 一 些 极 容易 出 现 错误 的 操作 ,比如 类 似 向 
Web 发 出 HTTP 请 求 这 样 的 操作 ,处 理 网 络 错误 或 是 JavaScript 使 用 错误 等 在 反馈 时 就 容 
易 出 现 歧义 ,或 是 错误 可 能 没有 得 到 处 理 。 

(2) 代码 编写 时 或 使 用 时 容易 造成 混乱 ,尤其 是 对 于 嵌 套 进行 的 异步 操作 ,一 系列 的 异 
步 操作 组 合 起 来 ,再 使 用 事件 监听 后 调用 回调 函数 会 十 分 痛苦 ,一 方面 逻辑 容易 混乱 , 另 一 
方面 代码 的 可 读 性 很 差 。 

所 以 ,当面 对 处 理 错误 频 发 ,种 类 多 样 的 异步 操作 或 是 一 系列 入 套 使 用 的 异步 操作 时 ， 
单纯 使 用 回调 函数 的 效果 就 会 变 得 很 差 ,往往 还 会 为 用 户 和 开发 者 造成 更 多 的 麻烦 。 对 于 
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这 类 情况 ,Promise 无 疑 提供 了 一 个 更 为 简洁 方便 的 解决 方案 。 
12.10.2 Promise 的 状态 


Promise 对 象 是 一 个 代理 对 象 (代理 一 个 值 ) ,被 代理 的 值 在 Promise 对 象 创建 时 可 能 
是 未 知 的 。 它 允许 你 为 异步 操作 的 成 功 和 失败 分 别 绑 定 相应 的 处 理 方法 (handlers)。 这 让 
异步 方法 可 以 像 同步 方法 那样 返回 值 ,但 并 不 是 立即 返回 最 终 执行 结果 ,而 是 一 个 能 代表 未 
来 出 现 结果 的 Promise 对 象 。 

Promise 对 象 在 创建 之 后 可 能 处 于 以 下 的 几 种 状态 : 

。 已 解决 (resolved / fullfilled) 。 

与 Promise 有 关 的 操作 成 功 。 

。 已 拒绝 (rejected / failed). 

与 Promise 有 关 的 操作 失败 。 

。 待定 (pending) 。 

与 Promise 有 关 的 异步 操作 还 在 进行 中 ,尚未 确定 是 操作 成 功 或 是 失败 。 

其 中 ,操作 成 功 与 失败 ,这 两 种 已 确定 的 状态 亦 可 以 被 定义 为 已 完成 (settled) 。 对 于 每 
一 个 Promise 对 象 ,其 状态 只 能 由 待定 状态 向 已 解决 或 已 拒绝 进行 转变 , 当 Promise 对 象 的 
状态 发 生 转变 后 ,其 状态 就 不 能 再 发 生 转 变 了 ,由 此 确定 了 一 系列 异步 操作 的 结束 。 

图 12.30 简要 介绍 了 Promise 对 象 的 使 用 过 程 , 若 异步 操作 成 功 进行 , 则 进入 then 请 
句 ; 若 异 步 操作 不 成 功 , 则 进入 catch 语句 。 注 意 到 , 当 异 步 操作 不 成 功 时 ,也 可 以 进入 
then 语句 ,此 时 应 满足 的 条 件 为 then 语句 中 有 第 二 个 处 理 函 数 来 对 失败 的 异步 操作 进行 处 
FB; 否则 ,程序 将 进入 catch 语句 。 在 Promise 的 异步 操作 成 功 或 失败 的 处 理 函数 中 ,可 以 
继续 返回 Promise 对 象 , 这 样 编写 嵌 套 的 许多 异步 操作 就 可 以 像 编 写 同 步 操作 代码 一 样 清 
晰 且 易 于 理解 ,12. 10. 3 节 将 通过 简单 的 实例 来 理解 Promise。 
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图 12.30 Promise 


12.10.3 Promise 的 使 用 


接 下 来 通过 4 个 简单 的 实例 具体 地 了 解 Promise 对 象 的 基本 使 用 方法 。 

首先 学 习 Promise 对 象 的 创建 与 状态 转换 。 请 看 如 下 实例 ,在 这 个 实例 中 ,HTML 页 
面 内 有 两 个 按钮 ,分 别 代 表 着 Promise 对 象 的 已 解决 状态 与 已 拒绝 状态 , 单 击 按钮 时 就 会 新 
建 一 个 Promise 对 象 ,并 使 其 由 待定 状态 转 为 已 完成 状态 ,并 模拟 完成 一 次 异步 操作 AK 
例 在 浏览 器 和 控制 台 的 展示 效果 如 图 12. 31 和 图 12. 32 所 示 。 
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图 12.31 Promise 已 解决 状态 


文件 名 : Promise 实例 1. html 


<!DOCTYPE HTML > 
<html lang = "en - US"> 
<head> 
< meta charset = "UTF — 8"> 
« title» Promise 实例 1 </title> 
</head> 
<body> 
< button id = "resolve"> resolve </button > 
< button id= "reject"> reject </button> 
< script > 
var flag; 


var res = document.getElementById("resolve"); 
var rej = document.getElementById("reject"); 
res.onclick = function()( 
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图 12.32 Promise 已 拒绝 状态 


flag = "Resolved"; 
testPromise(flag); 
}; 
rej.onclick = function(){ 
flag = "Rejected"; 
testPromise(flag); 
}; 
function testPromise(flag)( 
var myPromise = new Promise(function(resolve, reject) ( 
if (flag "Resolved")( 
setTimeout(function()( 
resolve(" Hif. Wi jy 3] uv ! ! Hot 1") ; 
),2000); 
}else{ 
setTimeout(function()( 
reject(" 这 个 例子 就 是 要 拒绝 你 没有 原因 "); 
},2000); 





n; 

myPromise. then(function(message)( 
console. log(message) ; 

n 

. catch(function(error)(í 
console. error(" H ## T ", error); 


D; 


</script> 

</body> 

</html> 

在 这 个 实例 中 sed PT fed AE T ñ E A K HAA A Ag Ak E Re h 
按钮 时 ,将 变量 flag 置 为 Resolved 或 Rejected, 以 此 决定 Promise 对 象 所 代理 的 异步 操作 
的 执行 成 功 失败 与 否 。 接 着 执行 已 编写 好 的 testPromise O PR Eit. Jf f£ A 2E ht flag 作为 
参数 。 

在 这 个 函数 中 ,首先 涉及 的 是 新 的 Promise 对 象 的 创建 。 在 构造 Promise 对 象 时 ,需要 
传人 executor 函数 ,其 中 需 传人 resolve 与 reject 作为 参数 。 在 executor 函数 内 部 ,通常 会 
进行 一 系列 的 异步 操作 ,并 最 终 决 定 何 时 将 该 Promise 对 象 的 状态 由 待定 转变 为 已 解决 或 
已 拒绝 。 其 中 ,可 以 通过 resolveO 5 reject() 方 法 ,对 Promise 对 象 的 状态 进行 转变 。 应 注 
意 , 这 样 的 转变 是 不 可 逆 的 。 

在 这 个 实例 中 ,为 了 简化 ,我 们 调用 setTimeout() 方 法 来 模拟 一 次 异步 操作 ,调用 
resolveO 3X reject() 方 法 作为 执行 函数 ,将 第 二 个 时 间 参 数 设 置 为 2000ms, 即 2s。 如 此 ,这 
样 的 一 次 “异步 操作 ”, 执 行 的 效果 是 等 待 2s 后 ,进行 Promise 对 象 的 状态 转变 。 对 于 
resolveO 5j reject() 方 法 ,可 以 传人 参数 , 它 可 以 是 变量 或 是 其 他 对 象 ,作为 异步 操作 成 功 
或 失败 后 返回 的 一 部 分 。 这 个 参数 将 会 被 传递 至 之 后 的 then 或 catch 语句 内 ,可 以 被 继续 
使 用 。 

运行 上 述 实例 , 当 单 击 resolve 按钮 时 ,在 控制 台 内 就 会 输出 成 功 的 提示 信息 ,如 
图 12. 31 所 示 ; 而 单 击 reject 按钮 ,控制 台 会 输出 错误 信息 ,如 图 12. 32 所 示 , 其 中 这 些 信 
息 都 是 我 们 之 前 在 调用 resolve() 或 reject() 方 法 时 传人 的 参数 。 

通过 上 面 这 个 实例 ,我们 学 习 了 如 何 创 建 Promise 对 象 与 以 及 如 何 改变 其 状态 的 方法 ， 
接 下 来 的 这 个 简单 的 实例 ,将 简要 讲解 Promise 对 象 的 链 式 使 用 方式 。 在 这 个 实例 中 ， 
HTML 页 面 中 有 一 个 按钮 , 单 击 这 个 按钮 后 ,就 会 执行 一 次 链 式 异步 操作 的 演示 , 同 之 前 一 
样 ,我 们 使 用 setTimeout() 方 法 来 模拟 一 次 异步 操作 ,该 实例 在 浏览 器 和 控制 台 的 展示 效 
果 如 图 12.33 所 示 o 

文件 名 : Promise 实例 2. html 

<! DOCTYPE HTML > 

<html lang = "en- US" 

<head> 

< meta charset = "UTF - 8"> 
« title» Promise 实例 2 </title> 
</head> 

< body> 

< button id = "start"> 开 始 </button > 
< Script> 


var start = document. getElementById("start"); 
start. onclick = testPromise; 


function testPromise()( 
var myPromise = new Promise(function(resolve, reject) ( 
setTimeout(function()( 
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resolve(" 这 是 第 一 个 任务 "); 
},1500); 
n; 


myPromise. then(function(message)( 
console. log(message) ; 
return new Promise(function(resolve, reject) ( 
setTimeout(function()( 
resolve(" 这 是 第 二 个 任务 "); 
},1500); 
n; 
n 
. then(function(message)( 
console. log(message); 
Di 
) 
</script> 
</body> 
</html> 
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图 12. 33 链 式 异步 操作 


在 这 个 实例 中 ,我 们 为 HTML 页 面 中 的 按钮 缠 定 了 一 个 单 击 事件 以 及 其 处 理 函 数 ,并 
作为 实例 效果 演示 的 开始 。 单 击 按钮 时 ,就 会 执行 我 们 自行 编写 的 testPromise() BG. E 
这 个 函数 中 ,创建 一 个 Promise 对 象 实例 并 将 其 赋予 变量 myPromise, 并 在 其 构造 方法 内 将 
Promise 对 象 的 状态 转变 为 已 解决 ,在 resolve() 方 法 内 传人 提示 信息 作为 参数 。 

接 下 来 为 myPromise 编写 异步 操作 成 功 执行 then 语句 ,在 then 语句 块 内 ,首先 在 控制 
台 输 出 之 前 传人 的 提示 信息 。 接 着 返回 一 个 新 的 Promise 对 象 ,并 同样 将 其 状态 转变 为 已 


解决 。 这 时 ,就 可 以 直接 在 最 外 层 添加 then if] BE fr 58 2E TR E BJ DU AE FE , i] A 165 BË GE HR 
套 的 添加 异步 操作 。 上 面 的 代码 在 执行 效果 上 与 如 下 代码 等 价 。 


myPromise. then( function(message){ 
console. log(message); 
return new Promise(function(resolve, reject){ 
setTimeout(function()( 


resolve(" 这 是 第 二 个 任务 "); 
},1500); 


n 
. then(function(message)( 
console. log(message) ; 
D 
D 


两 段 代 码 进行 对 比 不 难 发 现 ,对 于 类 似 这 样 的 嵌 套 进行 的 异步 操作 + 2C 251 4% A D DIE FE ik 
套 地 进行 编写 ,而 是 直接 在 外 层 链 式 地 使 用 then 语句 ,上 一 处 返回 的 Promise 对 象 即 可 被 
最 近 的 一 个 then 语句 块 进行 处 理 。 这 样 就 可 以 像 编写 同步 执行 的 代码 一 样 ,来 编写 一 系列 
异步 执行 的 操作 ,从 而 增加 代码 的 逻辑 清晰 程度 以 及 可 读 性 。 

Promise 对 象 的 使 用 不 仅 可 以 简化 嵌 套 的 异步 操作 编写 ,同时 也 简化 了 异步 操作 的 错 
误 处 理 。 以 下 这 个 实例 基于 上 一 个 实例 代码 ,不同 的 是 增加 了 错误 的 抛 出 与 处 理 。 在 这 个 
实例 代码 中 ,注释 了 两 段 抛 出 错误 的 代码 ,在 运行 测试 的 过 程 中 ,请 读者 取消 任意 一 个 语句 
的 注释 。 该 实例 在 浏览 器 和 控制 台 的 展示 效果 如 图 12. 34 所 示 。 
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12.34 Promise 错误 处 理 
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文件 名 : Promise 实例 3. html 


<! DOCTYPE HTML > 
< html lang = "en 一 0S"> 
<head> 
< meta charset = "UTF - 8"> 
«title» Pronise 实例 3 </title> 
</head> 
< body> 
<button id= "start"> 开 始 </button> 
«script» 
var start = document. getElementById("start"); 
start.onclick = testPromise; 


function testPromise()( 
var myPromise = new Promise(function(resolve, reject) ( 
setTimeout(function()( 
resolve(" 这 是 第 一 个 任务 "); 
},1500); 
ni 


myPromise. then(function(message)( 
console. log(message) ; 
/ /throw new Error(" 这 也 是 个 例子 就 是 要 出 错 "); 
return new Promise(function(resolve, reject){ 

setTimeout(function()( 
resolve(" 这 是 第 二 个 任务 "); 
},1500); 

ni 

n 

. then( function(message)( 
console. log(message); 
//throw new Error(" 这 也 是 个 例子 就 是 要 出 错 "); 

n 

. catch(function(error)( 
console. error(" H fif f ", error); 

) 

); 

) 
</script> 
</body> 
</html> 


上 一 个 实例 介绍 了 Promise 对 象 的 链 式 调用 ,可 以 看 出 , 链 式 调用 的 好 处 是 不 仅 可 以 将 
嵌 套 的 异步 操作 顺序 地 编写 成 处 理 函 数 ,而 且 可 以 对 异步 操作 出 现 的 错误 进行 统一 的 错误 
处 理 , 大 大 简化 了 开发 者 的 工作 。 在 这 个 实例 中 ,无 论 在 链 式 调用 哪 一 个 then 语句 内 抛 出 
错误 ,都 可 以 被 最 外 层 的 catch 所 捕获 并 处 理 , 这 样 的 编写 方式 可 以 在 很 大 程度 上 简化 异步 


操作 的 出 错 处 理 。 
最 后 介绍 Promise 对 象 的 all() 方 法 ,Promise. all() 内 可 以 传人 一 系列 Promise 对 象 。 


当 其 中 的 所 有 可 迭代 参数 ( 即 每 一 个 Promise 对 象 ) 都 已 完成 或 在 迭代 过 程 中 , 遇 到 第 一 个 
失败 , 才 会 返回 Promise 对 象 。 这 相当 于 将 多 个 Promise 对 象 组 合共 同 构成 了 一 个 新 的 
Promise 对 象 , 当 其 中 所 有 的 异步 操作 成 功 或 出 现 错误 时 才 返 回 。 接 下 来 的 实例 对 Promise 
对 象 的 all() 方 法 进行 展示 ,其 在 浏览 器 和 控制 台 的 展示 效果 如 图 12. 35 所 示 。 
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12.35 Promise 对 象 的 all() 方 法 
文件 名 : Promise 实例 4. html 


<! DOCTYPE HTML > 
< htnl lang = "en- US"> 
<head> 
< meta charset = "UTF - 8"> 
<title> Promise 实例 4 </title> 
</head> 
<body> 
< button id= "start"> 开 始 </button > 
«script» 
var start = document. getElementById("start"); 
start.onclick - testPromise; 


function testPromise()( 
var pl = new Promise(function(resolve, reject) ( 
setTimeout(function()( 





resolve("1 号 任务 "); 
},1500); 第 
Dni 12 
var p2 7 new Promise(function(resolve, reject) ( = 
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setTimeout(function(){ 
resolve("2 号 任务 "); 
},1500); 
n; 
var p3 = new Promise(function(resolve, reject) ( 
setTimeout(function()( 
resolve("3 号 任务 "); 
},1500); 
Di 
Pronise.all([ 
pi, 


n 


. then( function(messages)( 


console. 1og( "这些 任务 是 一 起 完成 的 ,它们 是 "); 
for (var i= 0;i« messages. length; i++ ) ( 
console. log(messages[ i]); 


Di 
) 
</script> 
</body> 
</html> 
在 这 个 实例 中 ,首先 新 建 了 三 个 Promise 对 象 实例 ,分 别 赋予 变量 pl .p2、.p3。 然 后 调 
用 Promise. all() ,将 三 个 Promise 对 象 数组 作为 参数 传人 。 当 这 三 个 Promise 对 象 所 代表 
的 异步 操作 完成 后 ,三 个 Promise 对 象 的 resolve() 方 法 的 返回 结果 便 会 组 成 一 个 新 的 数组 
返回 ,并 传人 之 后 进行 的 then 语句 中 。 最 后 ,循环 输出 三 个 Promise 对 象 在 调用 resolve() 
方法 的 传人 信息 。 


12.11 Cache 


Service Worker 使 开发 者 可 以 在 客户 端 应 用 与 Web 服务 器 之 间 建 立 一 个 代理 服务 器 ， 
对 用 户 与 Web 之 间 的 请 求 响应 进行 控制 ,通过 缓存 一 些 请 求 响应 对 ,用 户 得 以 获得 更 好 的 
应 用 离线 体验 。 其 中 ,在 Service Worker 的 标准 下 .Cache API 提供 请 求 (request) 响应 
(response) 对 象 对 的 存储 机 制 。 本 节 将 简要 介绍 Cache API 的 [Caches 




















相关 知识 。 mE 
12.11.1 Caches 5 Cache cache 
在 之 前 Service Worker 的 实例 中 ,我 们 看 到 Cache Storage cache 











的 管理 工具 内 ,一 个 域 下 可 以 创建 多 个 Cache 对 象 并 为 它们 命 
名 不 同 的 名 称 。 对 于 同一 个 域内 的 Cache 对 象 ,可 以 用 Caches 
对 象 来 表示 ,其 包含 关系 如 图 12. 36 所 示 。 通 过 Caches 对 象 可 — 812.38. caches 和 cache 











以 对 该 域内 的 单个 Cache 进行 添加 或 删除 。 
12.11.2 创建 Cache 


通过 调用 caches 全 局 变量 的 open() 方 法 ,并 传人 一 个 参数 作为 新 创建 Cache 对 象 的 名 
称 , 便 可 以 在 一 个 域 下 创建 一 个 新 的 Cache 对 象 。 该 方法 是 异步 的 , 它 返回 一 个 Promise 对 象 ， 
其 中 resolve() 方 法 将 新 创建 的 Cache 对 象 返回 ,在 then 语句 中 ,就 可 以 对 其 进一步 操作 。 


caches. open(cacheName) .then(function(cache){ 


// 新 创建 的 cache 可 以 由 此 使 用 


n; 


12.11.3 “Z Cache 内 添加 


Cache 是 一 个 缓存 空间 , 它 负 责 存储 一 个 个 请 求 与 响应 , 换 句 话说 ,就 是 用 户 向 Web 发 
出 的 请 求 ,以 及 请 求 所 对 应 的 结果 。 当 通过 caches 全 局 变量 创建 或 打开 一 个 cache 后 , 便 可 
以 向 其 添加 请 求 响应 对 。 这 里 可 以 使 用 add() , put O RI addAll() 三 种 方法 。 

1. addO Jj ik 

add() 方 法 ,只 需 传 人 一 个 Request 对 象 即 可 , 它 可 以 是 一 个 自 定义 的 Request 对 象 ,也 
可 以 是 一 个 URL ,方法 执行 后 ,请 求 所 对 应 的 响应 会 被 抓 取 一 并 保存 至 缓存 空间 。 


cache. add(request) .then(function(){ 
// 请 求 响应 对 被 添加 到 cache 中 ,其 中 响应 会 被 自动 抓 取 


n; 

2. put ) 方 法 

put() 方 法 ,需要 传人 两 个 参数 Request 对 象 和 Response 对 象 ,它们 分 别 是 请 求 以 及 其 
所 对 应 的 响应 。 


cache. put(request, response). then( function()( 
// 请 求 响应 对 被 添加 到 cache 中 


n; 


3. addAll() 方 法 
addAll() 方 法 ,类 似 于 add() 方 法 ,只 需 传 人 请 求 , 对 应 的 响应 会 被 自动 地 抓 取 并 保存 。 
所 不 同 的 是 ,addAll() 需 要 传人 的 是 所 要 获取 并 添加 到 缓存 的 字符 串 URL 数组 。 


cache. addAll(requests[]).then(function() ( 
// 一 系列 请 求 响应 对 会 被 存 人 cache 
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12.11.4 在 Cache 内 删除 


delete() 方 法 查询 以 所 输入 request 对 象 实例 为 键 的 Cache 对 象 , 即 通过 Request 对 象 
实例 找到 缓存 空间 内 所 要 删除 的 请 求 响应 对 。 如 果 找 到 , 则 删除 这 条 请 求 响应 对 记录 ,并 返 
回 resolve 为 true 的 Promise 对 象 。 如 果 没 有 找到 , 则 返回 resolve 为 false 的 Promise 
对 象 。 


cache. delete(request).then(function(true) { 
// 该 条 请 求 响应 对 记录 已 被 删除 


n; 


12.11.5 Æ Cache ñ = & 


match() 方 法 ,传人 一 个 request 对 象 或 者 一 个 URL 字符 串 作 为 参数 , 它 会 返回 一 个 
Promise 对 象 同 时 一 并 返回 缓存 中 第 一 个 与 传人 请 求 相 匹配 的 Response 对 象 。 如 果 没 有 
找到 匹配 的 内 容 , 则 返回 一 个 未 定义 的 Promise 对 象 ,其 中 不 包含 相 匹配 的 响应 。 

cache. match( request). then(function(response) ( 


// 找 到 与 该 请 求 所 匹配 的 响应 


n; 


keys() 方 法 返回 一 个 Promise 对 象 ,这 个 Promise 对 象 将 被 解析 为 一 个 cache 的 请 求 键 
的 数组 , 即 一 个 cache 下 全 部 的 请 求 (不 包括 响应 ) 共 同 组 成 的 数组 。 


cache. keys(). then(function(keys) ( 
// 获 得 所 有 请 求 


n; 


12.11.6 获取 所 有 已 创建 Cache 命名 


调用 caches 全 局 变量 下 的 keys() 方 法 ,会 返回 一 个 Promise 对 象 ,并 被 解析 为 当前 域 
下 所 有 Cache 对 象 命名 所 组 成 的 数组 。 


caches. keys(). then(function(cacheKeys) { 


// 获 取 一 个 域 下 所 有 cache 命名 


n»; 


12.11.7 删除 一 个 Cache 
调用 caches 全 局 变量 下 的 delete() 方 法 ,并 将 选 定 的 Cache 对 象 名 称 作为 参数 传人 , 便 


可 以 实现 当前 域 下 指定 Cache 对 象 的 删除 。 


caches. delete(cacheName) .then(function() { 
// 当 前 域 下 ,指定 的 Cache 对 象 已 被 删除 


12.12 J 题 


1. 什么 是 Service Worker? 它 在 Web 应 用 中 扮演 了 怎样 的 角色 ? 使 用 Service Worker 时 
有 哪些 要 求 ? 

2. 目前 Web 应 用 与 移动 端的 原生 应 用 有 什么 区 别 ? 请 结合 本 章 内 容 以 及 自己 的 体会 
来 比较 这 两 种 不 同类 型 的 应 用 ,并 展望 一 下 浏览 器 端 Web 应 用 的 前 景 。 

3. Service Worker 的 生命 周期 是 怎样 的 ? 试 着 画 出 其 生命 周期 简 图 ,并 解释 Service 
Worker 如 何在 这 几 种 状态 之 间 切 换 。 

4. 编写 一 个 基于 Service Worker 的 天 气 预报 类 应 用 ,从 第 三 方 网 站 中 获取 并 缓存 相应 
的 天 气 信息 。 思 考 应 该 使 用 哪 一 种 缓存 机 制 更 好 。 

5. 结合 本 章 内 容 并 自行 搜索 缓存 策略 相关 知识 ,分 析 比 较 不 同 的 缓存 策略 ,并 总 结 各 
自 的 适用 场景 。 

6. 什么 是 Promise 对 象 ? 使 用 它 可 以 完成 怎样 的 任务 ? 相 比 于 之 前 的 技术 , 它 又 有 怎 
样 的 优势 ? 

7. 简 述 Promise 对 象 的 状态 转换 与 使 用 , 画 出 这 一 过 程 的 图 示 。 

8. Promise 对 象 的 错误 处 理 是 怎样 的 ? 这 样 的 错误 处 理 方式 有 什么 好 处 ? 
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第 1328 HTMLS 实例 


本 章 将 应 用 之 前 HTML» 的 相关 内 容 , 逐 步 实现 一 个 经 典 的 贪 吃 蛇 小 游戏 实例 ,来 帮 
助 读者 更 好 地 理解 并 应 用 HTML5 的 相关 知识 。 

相信 对 于 很 多 人 来 说 , 贪 吃 蛇 游戏 并 不 陌生 。 这 个 游戏 由 一 条 一 直 不 停 移动 的 蛇 和 在 
地 图 上 不 断 出 现 的 果实 组 成 ,如 图 13. 1 所 示 。 蛇 可 以 任意 改变 其 前 进 的 方向 ,并 不 断 地 去 
吃 地 图 上 唯一 的 果实 。 每 当 蛇 吃 掉 果 实 后 , 蛇 自 身 的 长 度 会 增加 ,并 且 在 地 图 上 又 会 出 现 一 
个 新 的 果实 。 当 玩家 控制 蛇 不 当 , 使 蛇 吃 到 自己 的 身体 时 ,游戏 结束 。 








图 13.1 贪 吃 蛇 游戏 


在 有 些 贪 吃 蛇 游戏 中 , 蛇 所 活动 的 地 图 是 有 界 的 ,仿佛 地 图 的 边沿 有 一 堵 墙 , 当 蛇 移动 
的 过 程 中 触 碰 到 “ 墙 ”, 也 会 造成 游戏 的 结束 。 而 在 另外 一 些 贪 吃 蛇 游 戏 中 , 蛇 活 动 的 范围 是 
没有 界限 的 , 当 蛇 的 身体 移动 进入 地 图 的 边沿 时 , 蛇 的 头 将 会 在 地 图 的 另 一 边 出 现 ,如 
图 13.2 所 示 。 

在 我 们 将 要 实现 的 贪 吃 蛇 游戏 中 将 采用 穿 墙 ”而 过 的 规则 。 在 实现 贪 吃 蛇 的 基本 功能 
之 后 ,将 会 继续 为 蛇 每 次 吃 到 果实 和 游戏 结束 添加 音效 ,并 且 为 这 个 游戏 增加 计 分 和 游戏 排 
名 功能 。 下 面 就 开始 应 用 HTMLS 知识 来 实现 经 典 的 贪 吃 蛇 游 戏 。 








13.2 e 3K SR" H”, RERI 


13.1 网 格 系统 


在 上 述 的 贪 吃 蛇 游戏 图 片 中 可 以 看 到 ,我 们 所 要 制作 的 贪 吃 蛇 在 地 图 上 并 不 是 完全 自 
由 移动 的 。 准 确 地 说 ,整个 贪 吃 蛇 游戏 是 在 一 个 网 格 系统 下 实现 的 ,如 图 13.3 所 示 。 贪 吃 
蛇 本 身 是 由 一 串 横向 或 纵向 连续 出 现 的 小 网 格 所 组 成 ,而 果实 则 是 另 一 个 单独 被 填充 的 小 
网 格 。 由 此 ,一 个 贪 吃 蛇 游戏 就 被 转化 为 一 个 在 网 格 系统 下 的 填充 过 程 。 

















图 13.3 网 格 系统 


为 了 更 好 地 帮助 读者 理解 网 格 系统 背后 的 坐标 规律 ,首先 来 实现 如 图 13.3 所 示 的 简单 
的 网 格 绘制 。 


文件 名 : 网 格 系统 绘制 . html 
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<! DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF - 8"> 
<title></title> 
</head> 
<body> 
< canvas id= "snakegame" width = "400px" height = "400px"></canvas > 
<script> 
var myCanvas = document. getElementById("snakegame"); 
var context 7 myCanvas.getContext("2d"); 


context.fillStyle = "black"; 
context. fillRect(0, 0, myCanvas. width, myCanvas. height); 


context.fillStyle - "white"; 
for (var i20; i< 20; i++){ 
for (var j72 0; 3«20; j++){ 
context.fillRect(j * 20 + 1,i* 20* 1,18,18); 
) 
) 
</script> 
</body> 
</html> 


在 这 个 网 格 系统 的 实例 中 ,首先 可 以 看 到 所 有 的 绘 pecu 
制 过 程 是 建立 在 HTML5 Canvas 的 基础 上 的 。 在 实例 | 一 
中 ,首先 创建 一 个 长 宽 均 为 400px 的 画布 ,然后 ,将 这 个 | Lad 
400px X 400px 的 画布 转换 为 20X 20 的 网 格 系统 。 这 个 20px | 8px | 
转化 过 程 看 似 简单 ,感觉 只 是 将 400pxX 400px 的 画布 分 | 
割 成 400 个 20px X 20px 的 小 方 格 。 实 则 不 然 ,单纯 地 进 | 
行 分 割 便 会 忽略 网 格 之 间 的 间隙 ,所 以 实际 的 每 个 网 格 | 18px 














的 分 割 过 程 如 图 13. 4 所 示 。 一 — 
px 


由 图 13. 4 可 以 看 出 ,如 果 网 格 之 间 的 间隙 是 1px, 那 
么 实际 的 网 格 大 小 应 该 为 18pxX 18px 而 不 是 简单 的 图 13.4 单个 网 格 的 坐标 
20pxX20px。 这 样 ,就 不 难 理解 这 个 贪 吃 蛇 游 戏 的 网 格 

系统 的 坐标 规律 了 。 以 上 述 绘制 网 格 系统 的 代码 为 例 , 首 先 将 画布 整体 填充 为 黑色 ,然后 ， 
在 此 基础 上 通过 一 个 嵌 套 的 for 循环 来 以 白色 填充 画布 上 的 每 一 个 网 格 。 网 格 的 大 小 如 之 
前 所 述 为 18pxX18px。 而 对 于 填充 白色 网 格 的 起 始点 而 言 , 第 一 个 点 即 为 除去 线条 所 占 像 
素 之 后 所 获得 的 坐标 (1,1) ,其 他 点 则 相距 该 点 20px 依次 向 左 和 向 下 扩展 ,进而 完成 全 部 
20X20 的 网 格 绘制 。 


13.2 绘制 贪 吃 蛇 和 果实 


13.2.1 绘制 果实 
13.1 节 通 过 绘制 一 个 网 格 系 统 分 析 了 网 格 系 统 下 的 坐标 规律 。 于 是 一 个 贪 吃 蛇 游 戏 


便 从 一 个 400px X 400px 的 画布 绘制 , 变 为 一 个 在 20 X 20 的 网 格 系统 下 的 填充 过 程 。 下 面 
从 绘制 游戏 中 的 果实 开始 ,来 实现 网 格 系统 中 网 格 的 填充 过 程 。 请 看 如 下 代码 ,该 代码 中 具 
体 的 函数 调用 过 程 被 注释 ,请 取消 注释 分 别 进行 测试 ,其 在 浏览 器 中 的 展示 效果 如 图 13.5 和 
图 13.6 所 示 。 
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图 13.5 绘制 单个 果实 
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文件 名 : 


绘制 单个 果实 . html 


<! DOCTYPE HTML > 
< html lang = "en - US"> 


<head> 


< meta charset = "UTF - 8"> 
«title»«/title» 


</head> 
< body> 


«canvas id= "snakegame" width = "400px" height = "400px" style = "border: black solid 2px; "> 
«f canvas > 
«script» 


var myCanvas = document. getElementById(" snakegame") ; 
var context 7 myCanvas.getContext("2d"); 


// 全 局 变量 
var xFruit; 
var yFruit; 


// 填 充 单个 网 格 (x, y) 
function paintCell(x, y) ( 

context. fillRect((x- 1) * 20 * 1, (y- 1) * 20 * 1,18,18); 
) 


// 以 红色 绘制 果实 

function paintFruit()( 
context.fillStyle = "red"; 
paintCell(xFruit, yFruit); 

) 


// 随 机 设 定 果实 位 置 

function randonFruit()( 
xFruit = Math.floor((Math.random() * 1000)) $20 + 1; 
yFruit = Math. floor( (Math. random() * 1000)) $20 + 1; 
paintFruit(); 

) 


// 单 次 绘制 果实 
//xandonFruit(); 


/x 
// 循 环 出 现 果 实 , 测 试 果实 随机 位 置 全 覆盖 地 图 
setInterval(randomFruit, 5); 

*/ 


</script > 


</body> 
</html > 


在 这 个 实例 中 ,注意 到 与 之 前 不 同 的 是 ,通过 设置 < canvas > 标签 的 CSS 属性 ,使 画布 


具有 了 边框 ， 


从 而 标 出 地 图 的 范围 。 在 JavaScript 代码 中 ,首先 创建 的 是 关于 果实 坐标 的 全 


局 变量 一 一 xFruit 和 yFruit。 然 后 编写 一 个 填充 网 格 的 函数 paintCell() , 它 所 需要 输入 的 
变量 是 在 20X20 的 网 格 系统 下 的 坐标 (x,y)。 之 后 ,在 这 个 函数 里 ,将 这 个 坐标 转化 到 原 有 


画布 的 400px X 400px 的 坐标 下 进行 矩形 的 填充 绘制 。 有 了 这 个 paintCell O 函数 后 , 便 可 
以 在 之 后 绘制 果实 和 贪 吃 蛇 时 使 用 。 

下 面 继续 编写 绘制 红色 果实 的 函数 paintFruit O ,在 这 里 将 所 要 填充 的 颜色 设置 为 红 
色 , 然 后 直接 调用 paintCell O 函数 ,并 传人 果实 坐标 作为 参数 。 在 完成 这 个 函数 之 后 ,所 需 
解决 的 问题 便 是 果实 的 具体 坐标 的 设置 。 在 贪 吃 蛇 游戏 进行 的 过 程 中 ,显然 ,果实 是 随机 放置 
的 , 当 蛇 吃 掉 一 个 果实 后 ,下 一 个 果实 将 在 地 图 上 的 任意 位 置 产生 。 所 以 , 接 下 来 编写 随机 产 
生 果 实 的 函数 randomFruit()。 在 这 个 函数 内 ,通过 调用 数学 相关 函数 ,进行 随机 数 的 生成 并 
取 余 数 等 计算 ,使 果实 能 够 随机 地 出 现在 这 个 20X20 的 网 格 系统 下 。 

最 后 ,直接 调用 randomFruit() 函 数 , 便 可 以 看 到 地 图 上 随机 生成 的 果实 ,如 图 13.5 所 
示 。 为 了 测试 随机 生成 函数 的 正确 性 ,使 用 setInterval O 函数 对 随机 生成 果实 的 函数 进行 
反复 调用 ,查看 果实 是 否 可 以 最 终 将 地 图 填 满 ,以 检验 随机 生成 果实 的 计算 过 程 的 正确 性 ， 
如 图 13.6 所 示 。 


13.2.2 绘制 贪 吃 蛇 


在 绘制 果实 的 过 程 中 ,我们 编写 了 一 个 paintCell0 〇 函数 ,通过 这 个 函数 ,可 以 对 20 X20 
的 网 格 系统 进行 填充 。 复 用 这 个 函数 ,可 以 进一步 地 绘制 贪 吃 蛇 。 

不 同 于 果实 的 绘制 , 贪 吃 蛇 本 身 在 网 格 系 统 中 占据 的 是 多 个 坐标 点 ,所 以 需要 用 一 个 对 
象 数组 trail 对 贪 吃 蛇 所 占据 的 多 个 网 格 坐 标 进行 记录 。 同 时 ,为 了 能 够 确定 贪 吃 蛇 的 具体 
位 置 ,以 及 之 后 编写 过 程 中 所 涉及 的 贪 吃 蛇 移动 方向 与 吃 果实 过 程 ,还 需要 一 组 变量 
xHead 和 yHead 来 记录 贪 吃 蛇 头 的 位 置 。 除 此 之 外 , 贪 吃 蛇 本 身 具 有 长 度 , 所 以 还 需 另 外 
一 个 变量 snakeLen 来 记录 贪 吃 蛇 的 长 度 。 之 后 便 可 以 进行 贪 吃 蛇 的 绘制 了 ,请 看 如 下 代 
码 ,该 实例 在 浏览 器 中 的 展示 效果 如 图 13.7 所 示 。 
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图 13.7 绘制 贪 吃 蛇 
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文件 名 : 绘制 贪 吃 蛇 . html 


<! DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF - 8"> 
<title></title> 
</head> 
<body> 
«canvas id= "snakegame" width = "400px" height = "400px" style = "border:black solid 2px;"> 
</canvas > 
< script > 
var myCanvas = document. getElementById("snakegame"); 
var context = myCanvas.getContext("2d"); 


// 全 局 变量 


// 果 实 位 置 
var xFruit; 
var yFruit; 


// 蛇 

var trail; 
var xHead; 
var yHead; 
var snakeLen; 


// 填 充 单个 网 格 (x,Y) 
function paintCell(x, y)( 


context. fillRect((x- 1) * 20 * 1, (y- 1) * 20* 1,18,18); 


// 以 红色 绘制 果实 

function paintFruit()( 
context.fillStyle - "red"; 
paintCell(xFruit, yFruit); 


// 随 机 设 定 果 实 位 置 

function randonFruit()( 
xFruit = Math.floor((Math.random() * 1000)) $20 + 1; 
yFruit = Math.floor((Math.random() * 1000)) $20 + 1; 
paintFruit(); 


// 以 绿色 绘制 贪 吃 蛇 
function paintSnake()( 
context.fillStyle - "lime"; 
for (var i20; i«trail.length;i**)( 
paintCell(trail[i].x, trail[i].y); 


) 


// 初 始 化 蛇 
function initSnake()( 
trail = []; 
xHead - 10; 
yHead - 10; 
snakeLen 7 3; 
for (var i-0;i« snakeLen; i**)( 
trail. push((x:xHead + i - 2, y: yHead] ) ; 
) 
paintSnake(); 
) 


initSnake(); 
</script> 

</body> 

</html> 

在 上 述 实 例 中 ,我 们 完成 了 一 个 贪 吃 蛇 初始 化 的 过 程 。 相 比 于 之 前 的 实例 ,在 这 段 代 码 
中 ,多 了 前 面 介绍 的 变量 ,也 多 了 两 个 函数 ,分 别 是 paintSnakeO #ll initSnake()。 在 这 里 首 
先 需 要 理解 清楚 的 是 存储 贪 吃 蛇 所 占 网 格 的 trail 对 象 数 组 。 在 trail 对 象 数组 中 ,所 有 的 数 
据 都 是 以 (x,y) 坐 标 所 构成 的 对 象 为 单位 进行 存储 的 。 在 初始 化 贪 吃 蛇 的 initSnakeO 8 3k . 
我 们 通过 JavaScript 数组 对 象 的 push() 方 法 ,将 每 一 个 贪 吃 蛇 所 占 的 网 格 坐标 进行 添加 。 
这 个 push() 方 法 所 完成 的 过 程 , 就 是 将 对 象 添 加 入 数组 ,然后 索引 值 在 添加 的 过 程 中 依次 
递增 。 

可 能 有 些 读者 ,在 一 开始 会 对 代码 中 initSnake() 函 数 的 循环 调用 push() 方 法 有 一 些 疑 
惑 。 之 所 以 这 样 写 ,是 为 了 配合 之 后 的 蛇 移 动 过 程 的 实现 。 为 了 使 蛇 移 动 , 将 调用 
JavaScript 数组 对 象 的 shift() 方 法 。shift() 方 法 将 会 把 数组 中 索引 为 0 的 对 象 进行 移 除 ， 
为 了 实现 贪 吃 蛇 的 移动 过 程 ,需要 不 断 地 移 除 贪 吃 蛇 的 尾部 ,并 不 断 地 将 新 的 头 部 坐标 添加 
入 数组 中 。 这 就 解释 了 为 什么 在 initSnake() 函 数 中 最 后 才 遵 循 从 蛇 的 尾部 坐标 到 头 部 坐 
标 这 样 的 顺序 进行 数组 的 添加 ,循环 的 次 数 即 是 我 们 所 设 定 的 蛇 身 长 度 , 除 了 蛇 身 初始 长 
度 , 贪 吃 蛇 头 部 的 起 始 位 置 也 可 在 initSnake() 函 数 中 直接 设 定 。 

在 initSnake() 的 最 后 ,再 调用 paintSnake() 函 数 。 在 函数 中 ,首先 将 填充 颜色 设置 为 
绿色 ,然后 通过 for 循环 对 贪 吃 蛇 的 每 一 个 坐标 调用 paintCell( ) 进 行 填充 。 这 样 就 完成 了 
贪 吃 蛇 的 初始 化 过 程 。 


13.3 游戏 的 动态 过 程 


贪 吃 蛇 游戏 整个 过 程 都 是 动态 的 过 程 , 贪 吃 蛇 本 身 移动 ,玩家 可 以 通过 按键 对 蛇 移 动 的 
方向 进行 调整 。 当 蛇 吃 到 果实 之 后 , 原 有 的 果实 会 消失 ,新 的 果实 会 在 地 图 上 随机 产生 , 然 
后 蛇 本 身 的 长 度 会 自动 增加 。 若 玩家 操作 不 慎 , 让 蛇 吃 到 了 自己 的 身体 ,游戏 便 会 宣告 结 
束 。 下 面 将 会 对 这 些 动态 过 程 进行 逐步 的 实现 。 
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13.3.1 贪 吃 蛇 移动 


13. 2 节 简 单 地 介绍 了 通过 JavaScript 数组 对 象 的 push() 和 shift() 方 法 来 实现 蛇 移动 
的 基本 原理 ,在 本 节 的 代码 中 ,将 让 蛇 真正 地 移动 起 来 。 请 看 如 下 代码 ,该 实例 在 浏览 器 中 
的 展示 效果 如 图 13.8 和 图 13.9 所 示 。 
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图 13.8 蛇 移 动 1 
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图 13.9 蛇 移 动 2 


文件 名 : 贪 吃 蛇 移 动 . html 


<! DOCTYPE HTML > 
<html lang = "en- US"> 
<head> 
< meta charset = "UTF - 8"> 
«title»«/title» 
</head> 
< body> 
«canvas id= "snakegame" width = "400px" height = "400px" style = "border:black solid 2px; "> 
</canvas > 
< script> 
var myCanvas = document. getElementById("snakegame" ) ; 
var context = myCanvas.getContext("2d"); 


// 全 局 变量 


// 控 制 setInterval 
var t; 


// 果 实 位 置 
var xFruit; 
var yFruit; 


// 蛇 

var trail; 

var xHead; 

var yHead; 

var snakeLen; 

// 蛇 在 xy 两 个 方向 的 移动 速度 
var vx; 

var vy; 


// 填 充 单个 网 格 (x, y) 
function paintCell(x, y)( 


context. fillRect((x—- 1) * 20 * 1, (y- 1) * 20 + 1,18,18); 


// 以 红色 绘制 果实 


function paintFruit()( 
context.fillStyle - "red"; 
paintCell(xFruit, yFruit); 


// 随 机 设 定 果实 位 置 
function randomFruit(){ 


xFruit = Math.floor((Math.random() * 1000)) $20 + 1; 
yFruit = Math.floor((Math.random() * 1000)) $20 + 1; 
paintFruit(); 
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// 以 绿色 绘制 贪 吃 蛇 
function paintSnake()( 
context.fillStyle - "lime"; 
for (var i20; i«trail.length;i**)( 
paintCell(trail[i].x, trail[i].y); 
) 
) 


// 初 始 化 蛇 
function initSnake()( 
trail - []; 
xHead - 10; 
yHead = 10; 
wx = 1; 
vy = 0; 
snakeLen = 3; 
for (var i= 0;i« snakeLen; i**)( 
trail.push((x:xHead + i- 2, y: yHead]) ; 
) 
paintSnake(); 
) 


// 清 空 画 布 
function refreshCanvas()( 

context. clearRect(0, 0, nyCanvas. width, myCanvas. height); 
) 


// 移 动 蛇 

function moveSnake()( 
// 蛇 下 一 时 刻 的 头 部 坐标 
xHead = (vx+xHead+19)%20+1; 
yHead = (vy+yHead+19)%20+1; 
// 将 新 的 头 部 坐标 添加 入 trail 
trail. push( {x:xHead, y:yHead} ) ; 
// 将 尾部 的 坐标 移 除数 组 
while (trail. length > snakeLen){ 

trail.shift(); 

) 
// 清 空 画 布 
refreshCanvas(); 
// 重 新 绘制 蛇 
paintSnake(); 

) 


// 初 始 化 蛇 之 后 ,每 隔 100 毫秒 调用 moveSnake 进行 蛇 的 移动 
initSnake(); 
t 7 setInterval(moveSnake, 100) ; 
</script > 
</body> 
</html> 


在 这 个 实例 中 ,为 了 让 贪 吃 蛇 动 起 来 ,首先 添加 全 局 变量 vx 和 vy, 用 来 表示 贪 吃 蛇 在 
地 图 x 轴 和 y 轴 方 向 的 移动 速度 。 因 为 贪 吃 蛇 以 一 个 网 格 为 单位 进行 移动 ,所 以 vx 和 vy 
的 取 值 为 一 1、0 和 1 共 3 个 值 ,并 且 vx 和 vy 之 中 有 且 只 有 一 个 绝对 值 为 1。 这 样 就 保证 蛇 
只 能 在 与 x 轴 平 行 或 与 y 轴 平 行 之 中 的 一 个 方向 进行 移动 。 

在 新 的 initSnake() 函 数 中 ,将 vx 设 定 为 1,vy 设 定 为 0, 这 就 表示 贪 吃 蛇 初始 的 移动 方 
向 为 向 右 移动 ,应 注意 ,这 里 的 vx 和 vy 的 取 值 的 参考 系 是 Canvas 下 的 二 维 坐标 参考 系 , 不 
同 于 数学 中 的 直角 坐标 系 ,该 坐标 系 以 屏幕 左上 和 角 为 坐标 原点 ,x 轴 和 y 轴 正方 向 分 别 向 屏 
幕 的 两 边 延 伸 。 

在 这 个 新 的 实例 中 ,还 可 以 注意 到 新 添加 的 两 个 函数 分 别 是 moveSnake ( ) 和 
refreshCanvas()。 先 从 moveSnake() 函 数 人 手 ,这 个 函数 主要 完成 的 任务 是 实现 贪 吃 蛇 的 
移动 。 贪 吃 蛇 的 移动 过 程 ,简单 来 说 就 是 将 新 的 头 部 坐标 加 入 数组 ,然后 将 尾部 坐标 剔除 出 
数组 ,最 后 再 对 画布 进行 清空 并 对 “新 的 ” 蛇 进 行 重新 绘制 。 

清楚 了 这 个 过 程 之 后 ,再 去 看 moveSnake() 函 数 的 代码 就 可 以 很 好 地 理解 其 中 的 过 程 。 
首先 ,需要 计算 蛇 头 部 的 新 坐标 ,将 之 前 的 蛇 头 部 坐标 与 贪 吃 蛇 的 x 轴 和 y 轴 方 向 的 移动 速 
度 相 加 。 由 于 我 们 所 要 实现 的 贪 吃 蛇 游 戏 并 没有 采用 有 地 图 边界 的 游戏 规则 ,所 以 需要 再 
进行 一 个 取 余 数 过 程 。 然 后 ,再 将 计算 好 的 新 的 蛇 头 部 坐标 添加 到 对 象 数组 中 。 这 时 , 蛇 的 
长 度 超过 了 原 有 的 长 度 ,我 们 需要 将 原 有 的 蛇 尾 部 坐标 移 除 才能 实现 蛇 的 一 次 移动 过 程 ， 
而 不 是 延长 过 程 。 不 过 ,在 贪 吃 蛇 游 戏 中 , 当 蛇 食用 了 果实 之 后 确实 有 一 个 延长 过 程 ,所 
以 这 里 使 用 一 个 while 循环 ,对 添加 “新 " 蛇 头 部 后 的 数组 长 度 和 蛇 身 长 度 进行 一 个 判断 ， 
当 数 组 长 度 大 于 蛇 身 长 度 时 ,使 用 shift() 方 法 将 蛇 尾 部 的 坐标 对 象 剔除 出 数组 ,来 实现 
移动 过 程 。 而 当 蛇 食用 了 果实 后 ,可 以 将 蛇 身长 度 自 增 1, 这 样 就 可 以 实现 蛇 的 延长 
过 程 。 

最 后 ,需要 完成 的 是 画布 的 清空 和 重 画 过 程 ,否则 ,原来 的 贪 吃 蛇 还 会 继续 出 现在 画布 
上 ,最 终 的 效果 就 不 是 一 条 移动 的 蛇 了 ,而 是 一 段 蛇 的 连续 移动 轨迹 。 这 里 编写 了 一 个 
refreshCanvas() 函 数 对 画布 进行 清空 , 它 调用 clearRect() 函数 ,对 指定 的 矩形 区 域 ( 即 整个 
画布 实现 ) 实 现 清空 操作 。 在 清空 操作 之 后 ,再 调用 paintSnake() 函 数 , 即 可 完成 移动 后 的 
“新 ? 贪 吃 蛇 的 绘制 。 

为 了 让 贪 吃 蛇 真正 地 动 起 来 ,在 调用 函数 的 过 程 中 ,不 仅 需要 先 初 始 化 ,还 需要 使 用 
setInterval O PR #& , X} moveSnake O 函数 实现 每 隔 一 段 很 短 的 时 间 进 行 一 次 调用 ,这 就 最 
终 实现 了 一 条 贪 吃 蛇 在 一 个 特定 方向 的 移动 过 程 。 同 时 ,setInterval() 函 数 时 间 参 数 的 设 
置 也 可 以 改变 贪 吃 蛇 的 移动 速度 。 时 间 间 隔 设置 越 短 , 蛇 的 移动 速度 越 快 ,相应 地 ,游戏 
也 越 困 难 。 


13.3.2 贪 吃 蛇 转 向 


在 贪 吃 蛇 游 戏 中 ,玩家 可 以 通过 按 方向 键 实现 蛇 移 动 方向 的 转变 ,从 而 可 以 让 贪 吃 蛇 去 
吃 位 于 地 图 上 各 个 位 置 的 果实 。 为 了 实现 这 个 功能 ,首先 在 代码 的 最 开始 添加 一 个 键盘 按 
键 的 事件 监听 ,并 指定 一 个 keyPush() 事 件 处 理 函 数 ,来 响应 键盘 按 动 事 件 。 接 下 来 请 看 实 
例 代码 ,其 在 浏览 器 的 展示 效果 如 图 13. 10 所 示 。 由 于 增加 贪 吃 蛇 转向 功能 仅 涉 及 
keyPush() 相 关 函 数 , 故 在 此 仅 显 示 新 添加 部 分 的 代码 。 
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图 13.10 贪 吃 蛇 转 向 
文件 名 : 贪 吃 蛇 转向 . html( 部 分 ) 


// 为 键盘 按 下 事件 设置 事件 监听 ,并 指定 事件 处 理 函 数 keyPush() 
docunent. addEventListener("keydown" , keyPush) ; 

// 方 向 键 键盘 码 

var left = 37; 

var up 7 38; 

var right - 39; 

var down 7 40; 


// 键 盘 事件 的 事件 处 理 函 数 ,通过 方向 键 实现 方向 的 转变 
function keyPush(e)( 
switch(e.keyCode) ( 
case left: 
if(vx != 1 && vy !- O)( 
vx= -1;vy-70; 
) 
break; 
case up: 
if(vx != 0 && vy != 1)( 
vx-0;vy- -1; 


) 


break; 
case right: 
if (vx ^ -1 && vy != 0){ 
vx-l;vy-0; 


) 
break; 





case down: 


if (vx != O && vy != - 1)( 
vx-0;vy-71; 

) 

break; 


) 


在 这 个 贪 吃 蛇 游戏 中 ,将 以 键盘 的 方向 键 来 进行 贪 吃 蛇 的 转向 操作 。 当 然 有 些 人 会 更 
习惯 使 用 WASD 这 4 个 字母 键 进行 方向 操作 ,所 以 在 代码 中 ,我 们 设 定 up, down, left 和 
right 4 个 全 局 变量 ,用 来 保存 将 要 作为 方向 (上 、 下 、 左 、 布 ) 按 键 的 键盘 码 ; 然后 在 键盘 按 动 
事件 的 事件 处 理 函数 中 ,使 用 这 4 个 变量 作为 switch 语句 中 不 同 的 情况 。 

又 因为 在 贪 吃 蛇 游戏 中 ,我 们 一 般 在 蛇 原 有 移动 方向 的 基础 上 进行 向 左 或 向 右 转 向 ,而 
不 能 直接 进行 相反 方向 的 改变 ,所 以 在 switch 语句 中 的 每 个 case 下 ,需要 判断 将 要 转变 的 
方向 是 否 与 原 有 方向 直接 相反 ,如 果 相 反 则 直接 跳出 switch 语句 。 由 此 便 实现 了 贪 吃 蛇 的 
转向 过 程 。 


13.3.3 贪 吃 蛇 吃 果实 


在 实现 了 对 贪 吃 蛇 的 移动 控制 之 后 , 便 可 以 将 工作 转向 贪 吃 蛇 的 游戏 过 程 ,在 游戏 开始 时 
随机 生成 果实 ,并 在 蛇 吃 到 果实 后 自身 长 度 增加 ,同时 地 图 上 又 随机 生成 了 一 个 新 的 果实 。 接 
下 来 ,继续 对 之 前 的 代码 进行 添加 以 实现 这 一 过 程 , 该 实例 在 浏览 器 中 的 展示 效果 如 图 13. 11 
所 示 。 由 于 该 实例 代码 与 之 前 实例 有 大 量 重生 部 分 , 故 在 此 只 展示 部 分 相关 代码 。 
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图 13.11 贪 吃 蛇 吃 果实 
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文件 名 : 贪 吃 蛇 吃 果实 . html( 部 分 ) 


// 初 始 化 蛇 
function initSnake()( 
trail = []; 
xHead - 10; 


for (var i= 0;i« snakeLen;i++){ 
trail. push( {x:xHead + i - 2, y:yHead]) ; 
} 
randonFruit(); // 初 始 化 时 ,添加 果实 
paintSnake(); 
) 
// 移 动 蛇 
function moveSnake( ){ 
// 蛇 下 一 时 刻 的 头 部 坐标 
xHead = (vx+xHead+19)%20+1; 
yHead = (vy+ yHead + 19) $20 * 1; 
// 将 新 的 头 部 坐标 添加 入 trail 
trail. push( (x: xHead, y: yHead] ) ; 
// 将 尾部 的 坐标 移 除数 组 
while (trail. length > snakeLen)( 
trail.shift(); 
) 
// 判 断 是 否 吃 到 果实 
eatFruit(); 
// 清 空 画布 
refreshCanvas(); 
// 重 新 绘制 蛇 
paintSnake(); 
// 重 新 绘制 果实 
paintFruit(); 
) 
// 判 断 贪 吃 蛇 是 否 吃 了 果实 
function eatFruit(){ 
if (xHead == xFruit && yHead == YEruit){ 
randonFruit(); 
snakeGrow(); 
) 
) 
// 蛇 在 吃 果实 之 后 变 长 
function snakeGrow()( 
snakeLen**; 
xHead = (vx-* xHead + 19) $20 +1; 
yHead = (vy+ yHead * 19) &20 * 1; 
trail. push( (x: xHead, y: yHead] ) ; 


这 个 实例 在 之 前 实现 了 贪 吃 蛇 移动 的 基础 上 ,增加 了 贪 吃 蛇 吃 果实 的 过 程 。 在 游戏 过 
程 中 ,为 了 让 果实 出 现在 地 图 上 ,需要 在 初始 化 initSnake() 就 在 地 图 上 随机 生成 一 个 果实 ， 
故 需 在 这 个 函数 中 调用 之 前 已 经 写 好 的 randomFruit() 函 数 。 除 此 之 外 ,在 实现 蛇 的 移动 
过 程 中 ,需要 不 断 地 清空 画布 并 重新 绘制 , 故 需 在 moveSnake() 函 数 中 如 同 重 新 绘制 蛇 调 用 
paintSnakeO PR 2 — FÉ ,进行 paintFruit() 的 调用 。 

完成 了 果实 与 贪 吃 蛇 并 存 之 后 ,我 们 来 关注 如 何 让 蛇 吃 果实 ,在 这 里 只 需 判 断 蛇 的 头 部 
坐标 是 否 与 果实 的 坐标 相同 ,车 相同 , 则 可 知 蛇 吃 到 果实 ,同时 地 图 上 需要 重新 出 现 一 个 新 
的 果实 ,同时 蛇 自 身 的 长 度 要 增加 。 这 里 再 编写 两 个 函数 来 完成 这 一 过 程 ,分 别 是 eatFruit() 
函数 和 snakeGrow(), 来 判断 蛇 是 否 吃 到 果实 ,并 在 吃 到 果实 后 将 蛇 的 长 度 增加 。 在 
eatFruit O 函数 中 ,添加 一 个 条 件 判断 ,判断 蛇 的 头 部 坐标 是 否 和 果实 坐标 相同 ,如 若 相同 则 
调用 randomFruit O 函数 重新 生成 果实 ,再 接着 调用 snakeGrow() 进 行 蛇 的 长 度 增加 。 在 
snakeGrow() 函 数 中 ,首先 将 代表 蛇 身长 度 的 全 局 变量 snakeLen 自 增 , 随 后 计算 新 的 头 部 
坐标 ,并 将 其 添加 到 蛇 身 坐 标 数组 对 象 中 ,这 就 实现 了 将 蛇 在 其 当前 移动 方向 上 进行 伸 长 一 
个 单位 的 操作 。 由 此 便 完成 了 贪 吃 蛇 吃 果实 后 伸 长 的 过 程 。 


13.3.4 贪 吃 蛇 吃 自己 游戏 结束 


在 完成 了 上 一 个 实例 之 后 ,还 需 进 一 步 将 整个 游戏 的 动态 过 程 完成 , 那 就 是 定义 游戏 的 
结束 。 在 当前 的 无 地 图 边界 的 游戏 设 定 下 , 蛇 将 在 移动 过 程 中 不 小 心 吃 到 自己 后 游戏 结束 。 
这 里 再 添加 两 个 函数 selfEat() 和 endGame() 分 别 完成 该 过 程 。 请 看 如 下 实例 ,该 实例 在 浏 
览 器 中 的 展示 效果 如 图 13.12 所 示 。 巾 于 该 实例 与 之 前 的 实例 有 大 量 的 重 和 部 分 ,在 此 仅 
展示 部 分 相关 代码 。 
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文件 名 : 贪 吃 蛇 吃 自己 游戏 结束 . html( 部 分 ) 


// 移 动 蛇 
function moveSnake( ) ( 
// 蛇 下 一 时 刻 的 头 部 坐标 
xHead = (vx+xHead+19)%20+1; 
yHead = (vy+ yHead+19)%20+1; 
// 在 蛇 移 动 之 后 检查 是 否 吃 到 自己 
selfEat(); 
// 将 新 的 头 部 坐标 添加 入 trail 
trail.push( (x: xHead, y: yHead] ) ; 
// 将 尾部 的 坐标 移 除数 组 
while (trail. length > snakeLen)( 
trail.shift(); 
) 
// 判 断 是 否 吃 到 果实 
eatFruit(); 
// 清 空 画布 
refreshCanvas(); 
// 重 新 绘制 蛇 
paintSnake(); 
// 重 新 绘制 果实 
paintFruit(); 
) 
// 蛇 在 吃 到 自己 之 后 游戏 结束 
function selfEat()( 
for (var i- 0;i«trail.length;i**)( 
if (xHead == trail[i].x && yHead == trail[i].y)( 
endGame( ) ; 
) 
) 
J 
// 游 戏 结束 函数 
function endGame( ){ 
alert("Good Game! "); 
location. reload(); 
return; 


) 

在 之 前 代码 的 基础 上 ,我 们 添加 了 selfEat() 和 endGame() 函 数 来 实现 贪 吃 蛇 是 否 吃 到 
自己 的 判断 ,并 在 确认 吃 到 自己 后 ,进行 结束 游戏 的 操作 。 其 中 ,我 们 将 selfEat() 函 数 的 调 
用 写 在 了 moveSnake() 函 数 实现 的 相应 位 置 , 即 在 计算 出 新 的 贪 吃 蛇 头 部 位 置 后 ,执行 贪 吃 
蛇 是 否 吃 到 自己 的 判断 。 

对 于 selfEat() 函 数 本 身 , 即 是 一 个 对 蛇 身 体 每 个 位 置 坐标 的 遍历 ,查看 新 的 蛇 头 部 是 
否 与 蛇 身体 交 释 。 若 坐标 出 现 交 释 , 则 表明 贪 吃 蛇 吃 到 了 自己 ,然后 调用 endGame() 函数 
来 执行 游戏 结束 的 操作 。 在 该 实例 中 .我 们 仅仅 进行 了 弹出 对 话 框 并 重新 加 载 页 面 的 操作 。 
后 面 将 会 对 这 部 分 进行 进一步 完善 ,来 显示 出 游戏 分 数 记录 的 排行 榜 。 





13.4 游戏 音效 


13.3 节 基 本 上 完成 了 贪 吃 蛇 游 戏 的 实现 ,运行 实例 代码 ,我 们 可 以 对 一 个 贪 吃 蛇 进 行 
操控 ,使 其 在 地 图 上 食用 果实 并 增长 身体 ,在 不 小 心 吃 到 自己 时 游戏 结束 。 但 是 仅 有 这 些 ， 
这 个 贪 吃 蛇 小 游戏 还 不 够 有 趣 。 在 之 后 的 两 节 中 ,我 们 将 为 这 个 贪 吃 蛇 小 游戏 加 上 音效 和 
分 数 记录 ,使 其 变 得 更 加 完整 。 

接 下 来 为 贪 吃 蛇 游戏 添加 音效 。 在 贪 吃 蛇 吃 到 果实 以 及 吃 到 自己 时 ,我 们 希望 添加 不 
同 的 音效 来 丰富 游戏 。 在 这 里 需要 用 到 第 4 章 的 知识 ,在 HTML 文档 中 添加 两 个 < audio > 
标签 以 及 fruitEatingSound() 和 gameOverSound() 两 个 函数 来 实现 。 请 看 如 下 实例 。 由 于 
本 实例 代码 与 之 前 实例 有 大 量 重 又 部 分 , 故 在 此 只 展示 部 分 相关 代码 。 

文件 名 : 为 游戏 添加 音效 . html( 部 分 ) 


< audio src = "eatFruit. mp3" id= "eatFruit"></audio> 
< audio src = "gameOver.mp3" id= "gameOver"»«/audio^ 
< script> 
/* 省 略 代码 * / 
// 判 断 贪 吃 蛇 是 否 吃 了 果实 
function eatFruit(){ 
if (xHead == xFruit && yHead == yFruit){ 
fruitEatingSound(); 
randonFruit(); 
snakeGrow(); 


) 


// 蛇 在 吃 到 自己 之 后 游戏 结束 
function selfEat(){ 
for (var i=0;i<trail.length;i++)( 
if (xHead == trail[i].x && yHead == trail[i].y)( 
gameOverSound( ) ; 
endGane( ) ; 


) 
) 
// 游 戏 结束 函数 
function endGame( ){ 
clearInterval(t); 
setTimeout(function()( 
alert("Good Gane! "); 
location. reload(); 
return; 
),300); 
) 
/ HRK 
function fruitEatingSound()( 
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var fruitSound = document.getElementById("eatFruit"); 
fruitSound.currentTime = 0; 
fruitSound. play(); 
— gameOverSound( ) ( 
var endGameSound = document.getElementById("gameOver"); 
endGameSound.currentTime - 0; 
endGameSound. play() ; 
js 省 略 代 码 / 
«/script» 
首先 在 代码 文件 的 相同 目录 下 添加 了 两 个 音频 文件 ,分 别 是 catFruit. mp3 和 
gameOver. mp3, 它 们 是 游戏 音效 的 源 文件 。 然 后 在 HTML 文档 中 的 < body > 标签 内 添加 
两 个 < audio > 标签 ,并 设置 src 属性 为 之 前 两 个 音频 文件 的 URL. 
在 < script > 标签 下 ,添加 fruitEatingSound() 和 gameOverSound() 这 两 个 函数 来 播放 
上 述 音 频 文件 。 两 个 函数 的 实现 与 调用 过 程 相似 ,下 面 以 fruitEatingSound O PR Cy f] BË: 
行 说 明 。 在 这 个 函数 中 ,首先 通过 标签 id 获取 到 了 吃 果实 音效 的 < audio > 标签 。 随 后 , 设 
置 标签 的 currentTime 属性 为 0, 即将 时 间 定 位 在 开始 ,这 样 就 可 以 保证 每 次 吃 果实 都 从 
头 播放 音频 文件 ,而 不 是 听 其 中 的 某 一 段 。 然 后 调用 标签 的 play( ) 方 法 , 即 可 完成 音频 的 
播放 。 
完成 了 两 个 < audio > 媒体 播放 的 函数 后 ,将 fruitEatingSound() 和 gameOverSound() 这 两 
个 函数 的 调用 添加 到 相应 的 判断 条 件 成 立 的 位 置 。 这 样 , 便 实现 了 在 贪 吃 蛇 吃 到 果实 和 吃 
到 自己 时 播放 相应 的 音效 。 但 是 ,仅仅 做 出 这 些 改变 可 能 还 不 够 ,还 需要 进一步 改变 之 前 的 
endGame() 函 数 。 在 这 个 函数 中 ,需要 把 原来 的 alert() 函 数 写 在 setTimeout O 函数 里 , 即 
先 等 待 一 个 非常 短 的 时 间 再 进行 alert() 方 法 的 调用 。 之 所 以 这 样 做 ,是 由 于 alert() 方 法 
的 及 时 性 。 在 调用 alert() 方 法 后 ,页 面 会 迅速 产生 一 个 事件 并 进行 处 理 , 它 会 影响 页 面 
内 其 他 部 分 程序 的 执行 。 在 我 们 的 贪 吃 蛇 游戏 中 , 蛇 在 吃 到 自己 后 ,会 调用 之 前 所 编写 
的 gameOverSound() 函 数 , 而 调用 音频 并 播放 的 速度 明显 会 慢 于 调用 alert() 方 法 后 页 面 
所 产生 的 事件 。 这 样 , 如 果 没 有 setTimeout() 函数 的 帮助 ,很 多 情况 下 , 当 贪 吃 蛇 吃 到 自 
己 游戏 结束 后 ,会 率先 完成 alert() 方 法 的 执行 ,并 弹出 弹 框 ,而 不 会 听 到 游戏 结束 的 
音效 。 


13.5 游戏 分 数 记录 


尽管 游戏 到 目前 这 样 已 经 基本 完成 ,但 只 是 完成 贪 吃 蛇 吃 果实 ,然后 蛇 身 变 长 这 一 过 程 
并 不 能 满足 玩 游戏 的 人 ,还 需要 一 个 分 数 记录 来 记录 每 次 的 游戏 成 绩 ,并 实现 一 个 分 数 排行 
榜 , 这 样 便 增 加 了 游戏 的 挑战 性 和 趣味 性 。 为 了 实现 记录 游戏 分 数 的 功能 ,需要 用 到 Web 
Storage 相关 的 知识 。 

本 节 将 单独 编写 一 个 HTML 页 面 来 完成 排行 榜 的 显示 与 更 新 工作 。 该 排行 榜 具 体 的 
业务 逻辑 为 ,在 游戏 进行 过 程 中 ,玩家 可 以 单 击 页 面 中 的 按钮 并 跳 转 到 这 个 排行 榜 来 查看 成 
绩 。 当 游戏 结束 且 玩 家 玩 出 了 可 以 进入 排行 榜 前 十 的 分 数 ,那么 页 面 将 自动 跳 转 到 排行 榜 ， 


提示 玩家 输入 自己 的 姓名 ,并 将 自己 的 成 绩 录入 排行 榜 , 然 后 刷新 页 面 并 更 新 榜 单 。 总 的 来 
说 ,通过 描述 ,我 们 可 以 抽象 出 该 排行 榜 页 面 的 两 个 主要 功能 ,分 别 是 记录 新 成 绩 和 显示 排 
行 榜 。 我 们 将 编写 saveScore() 和 showRecord() 来 实现 记录 成 绩 和 显示 排行 榜 这 两 个 功 
能 ,下 面 从 记录 新 成 绩 开始 。 


13.5.1 记录 分 数 


在 9.1 节 中 ,我们 学 习 了 会 话 存储 CSession Storage) 相 关 知 识 。 会 话 存储 在 浏览 器 中 
所 保存 数据 的 生命 周期 为 当前 会 话 , 即 发 生 会 话 存储 保存 的 页 面 ,以 及 通过 这 个 页 面 所 跳 转 
到 的 其 他 页 面 。 这 个 性 质 与 我 们 的 应 用 场景 恰好 对 应 , 当 玩 家 在 游戏 中 玩 出 高 分 后 页 面 跳 
转 至 排行 榜 , 并 将 本 次 高 分 录入 排行 榜 。 在 这 个 过 程 中 ,我 们 可 以 利用 会 话 存 储 来 实现 数据 
在 页 面 间 的 共享 。 在 玩家 玩 出 高 分 后 ,将 本 次 高 分 以 键 为 score 存 人 会 话 存储 中 ,并 跳 转 到 
排行 榜 页 面 。 在 新 的 页 面 中 , 便 可 以 通过 键 score 来 访问 之 前 所 取得 的 高 分 。 最 后 ,在 保存 
结束 后 ,将 会 话 存储 删除 ,由 此 实现 数据 在 同一 会 话 下 两 个 页 面 之 间 的 共享 。 

为 了 在 编写 代码 的 过 程 中 调试 方便 ,可 以 通过 图 13. 13 所 示 的 方式 ,在 调试 界面 的 会 话 
存储 部 分 ,直接 插入 键 值 对 。 这 样 便 可 以 模拟 获得 高 分 的 情况 。 
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13.13 在 调试 界面 直接 插入 会 话 存储 键 值 对 


接 下 来 实现 排行 榜 的 HTML 页 面 , 先 从 获取 高 分 后 所 跳 转 的 页 面 写 起 。 请 看 如 下 实 
例 代码 。 
文件 : 录入 分 数 . html 


<! DOCTYPE HTML > 
<html lang = "en — US"> 
<head> 
< neta charset = "UTF - 8"> 
«title»«/title» 
</head> 
< body> 
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< h2 > 恭喜 您 斩获 高 分 ,请 输入 您 的 姓名 录入 排行 榜 </h2 > 
< input id= "name" type = "text"/> 
< button onclick = "saveScore()"> 提 交 </button> 
< script> 
function currentDate()( 
var date = new Date(); 
var myDate = date.getFullYear() + "4E" + Number(date.getMonth() +1) + "H" + 
date.getDate() + "H" + date.getHours() + "Bj" + date.getMinutes() + "4)"; 
return myDate; 
} 
function bubbleSort(arr){ 
var swapped = true; 
var j= 0; 
var tmp; 
while (swapped){ 
swapped = false; 
gr; 
for (var i=0;i< arr. length- j;i**)( 
if (Number(arr[i].score)« Number(arr[i * 1]. score))( 
tmp = arr[i]; 
arr[i] = arr[i*1]; 
arr[i*1] = tmp; 
swapped = true; 


) 
function saveScore()( 
var myName = document.getElementById("name"). value; 
var myScore = sessionStorage["score"]; 
var date = currentDate(); 
var myRecord = ( 
name:myName, 
Score:myScore, 
date:date 
}; 
var rank; 
var scores = localStorage. getItem("scores"); 
if (scores)( 
rank = JSON.parse(scores); 
if (rank.length « 10)( 
rank. push(myRecord); 


bubbleSort(rank); 
}else{ 
rank. pop( ); 
rank. push(myRecord) ; 
bubbleSort (rank); 
} 
}else{ 


rank = new Array(); 
rank[0] = myRecord; 


) 
var jsonScores = JSON.stringify(rank); 
localStorage. setItem(" scores", jsonScores) ; 
sessionStorage. removeltem(" score"); 
alert(" 排 名 已 更 新 "); 
location. reload(); 
} 
</script > 
</body> 
</html > 


接 下 来 在 调试 界面 内 的 会 话 存 储 部 分 插入 键 值 对 ,并 在 输入 框 内 输入 姓名 并 单 击 “ 提 
交 ” 按 钮 ,上 述 操作 的 运行 效果 如 图 13. 14 一 图 13.16 所 示 。 
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13.14 ”在 会 话 存储 中 插入 键 值 对 
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图 13.15 输入 姓名 并 单 击 “提交 ”按钮 后 
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图 13. 16 在 调试 页 面 查看 所 保存 结果 


下 面 分 析 上 述 实例 代码 。 在 这 段 代码 的 HTML 页 面 内 ,首先 添加 了 一 个 二 级 标题 标 
签 < h2 > 文本 输入 框 < input > 标签 和 提交 按钮 < button > 标签 。 在 这 个 提交 按钮 中 指定 了 
该 按钮 对 应 的 单 击 事件 所 触发 的 处 理 函 数 saveScore() 。 

在 saveScore O 函数 的 主体 中 ,首先 输入 框 内 文本 内 容 的 获取 和 会 话 存储 变量 的 获取 。 
除 此 之 外 ,我 们 还 希望 将 日 期 时 间 信息 同姓 名 、 分 数 一 起 录入 排行 榜 , 所 以 要 进行 当前 日 期 
时 间 的 获取 。 这 里 编写 了 一 个 currentDateO 函数 ,通过 JavaScript 中 的 日 期 时 间 函 数 来 构 
造 特定 格式 的 日 期 时 间 字 符 串 并 返回 。 然 后 ,使 用 姓名 、 分 数 和 日 期 时 间 一 起 构造 一 个 新 对 
象 myRecord, 

在 本 实例 中 ,对 于 排名 数据 的 保存 ,采用 先 构 造 对 象 数组 再 转化 成 JSON 字符 串 的 形式 
存 人 本 地 存储 (Local Storage) 中 。 相 应 地 ,在 取出 排名 数据 时 ,也 应 当先 从 JSON 字符 串 转 
化 为 对 象 数组 ,再 使 用 。9. 1.6 节 介 绍 了 JSON 的 相关 知识 。 本 实例 利用 JSON 的 stringifyO 
方法 和 parse() 方 法 ,来 实现 JavaScript 对 象 和 JSON 字符 串 的 之 间 的 转化 。stringify() 方 
法 将 原 有 的 JavaScript 对 象 转化 为 JSON 字符 串 。parse() 方 法 将 JSON 字符 串 解析 为 
JavaScript 对 象 。 

在 本 实例 中 ,首先 通过 localStorage 的 getItem() 方 法 ,来 获取 已 经 存在 的 排名 数据 。 
若 排名 数据 存在 , 则 将 以 JSON 字符 串 形式 保存 的 排名 数据 通过 parse O 77 1 t Br 2S 
JavaScript 对 象 。 我 们 约定 只 显示 前 十 位 排名 。 当 排行 榜 内 数据 少 于 10 条 时 , 则 直接 插入 
由 排名 所 组 成 的 对 象 数组 ,并 排序 ; 若 排行 榜 内 数据 等 于 10 条 , 则 每 次 将 第 10 条 数据 删 
除 ,然后 插入 新 数据 并 排序 ; 若 排行 榜 在 之 前 不 存在 , 即 第 一 次 完成 游戏 时 , 则 新 建 一 个 排 
行 榜 。 

在 上 述 逻 辑 的 实现 过 程 中 ,有 几 点 值得 注意 。 在 进行 排名 数据 的 插入 和 删除 过 程 中 , 采 
用 Array 对 象 的 pop() 方 法 ,弹出 栈 顶 的 数据 。 使 用 push O Jr iE ,在 栈 顶 压 入 新 数据 。 至 于 
排序 过 程 , 针 对 当前 的 排名 数据 对 象 单 独 编写 了 一 个 冒 泡 排序 函数 bubbleSort() 来 实现 排 


序 过 程 。 由 于 内 容 所 限 ,请 读者 自行 搜索 并 学 习 冒 泡 排序 算法 。 对 于 本 实例 中 冒 泡 排序 函 
数 的 实现 ,有 一 点 需要 注意 , 即 在 比较 大 小 时 ,应 当 采 用 Number() 方 法 进行 数据 类 型 转换 ， 
将 字符 串 转 换 为 数值 ,进而 比较 大 小 。 之 所 以 这 样 做 ,是 因为 在 JavaScript 对 象 和 JSON F 
符 串 的 来 回转 换 中 ,数值 数据 会 被 转换 为 字符 串 。 若 直接 比较 大 小 ,那么 所 得 的 结果 将 是 字 
符 串 的 比较 ,而 非 数 值 的 比较 ,由 此 会 造成 错误 。 

在 完成 新 的 排名 数据 对 象 的 构造 之 后 , 便 可 以 使 用 JSON 的 stringify() 方 法 ,将 
JavaScript 对 象 转换 为 JSON 字符 串 ,并 保存 到 本 地 存储 中 。 最 后 ,删除 会 话 存储 中 的 score 
键 值 对 。 由 此 便 编 码 实 现 了 一 次 排名 数据 录入 的 过 程 。 


13.5.2 显示 分 数 


有 了 记录 分 数 的 方式 后 ,还 需要 将 排行 榜 以 表格 的 形式 显示 在 页 面 当 中 。 在 通过 上 一 
节 实 例 进行 插入 若干 数据 的 操作 后 ,下面 通过 实例 进行 排行 榜 的 显示 。 该 实例 在 浏览 器 中 
的 运行 效果 如 图 13.17 所 示 。 








e = a x 
D 显示 分 数 .html x 
C | O file//D/IREB/HTMLS/HTMLS/HTMLSSBAAE/HTMLSSUB.. B fr) i 
um 
排行 榜 
排名 姓名 日 期 分 数 
1 5989 2018 年 3 月 31 日 18 时 4 分 。 3200 


2 空调 遥控 器 ” 2018 年 3 月 31 日 18 时 6 分 。 2200 
3 空调 遥控 器 ”2018 年 3 月 31 日 18 时 3 分 。 2000 
4 吸尘器 2018 年 3 月 31 日 18 时 5 分 。 1800 
5 空调 2018 年 3 月 31 日 18 时 2 分 。 1200 
6 抽 油 烟 机 。 ”2018 年 3 月 31 日 18 时 1 分 。 800 
7 滚 简 洗衣 机 2018 年 3 月 31 日 18 时 4 分 。 800 
8 插座 2018 年 3 月 31 日 18 时 7 分 — 700 


9 饮水 机 2018 年 3 月 31 日 15 时 28 分 600 








10 DEBE 2018 年 3 月 31 日 18 时 5 分 。 500 





13.17 显示 排行 榜 分 数 


文件 名 : 显示 分 数 . html 


<! DOCTYPE HTML > 
< html lang = "en- US"> 
<head> 


< meta charset = "UTF — 8"> 
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<title></title> 
<style> 
table{ 
padding:10px 10px 10px 10px; 
} 
</style> 
</head> 
< body> 
< hl > 排行 榜 </hl > 
< div id= "displayArea"» 
<table id = "nyTable" cellpadding = 10></table> 
</div> 
< Script> 
showRecord(); 
function tableItem(par, tname, str) ( 
var td = document. createElement(tname); 
var txt = document. createTextNode(str); 
td. appendChild(txt); 
par. appendChild(td); 


function showRecord()( 
var scores = localStorage. getlItem("scores"); 
Scores = JSON. parse( scores); 
var displayArea = document. getElementById("displayArea"); 
var table = document. getElementById("myTable"); 
var trHead = document.createElement("tr"); 
tableItem(trHead, "th", "排名 "); 
tableItem(trHead, "th", "姓名 "); 
tableItem(trHead, "th", "日 期 "); 
tableItem(trHead, "th", "分 数 "); 
table. appendChild(trHead); 


for (var i= 0;i« scores. length; i++){ 
var tr = document. createElement("tr"); 
tableItem(tr,"td",i-* 1); 
tableItem(tr, "td", scores[ i]. name); 
tableItem(tr, "td",scores[i].date); 
tableItem(tr, "td", scores[ i]. score); 
table. appendChild(tr); 


) 
) 
</script> 
</body> 
</html> 


在 这 个 实例 的 HTML 页 面 中 ,首先 添加 了 一 级 标题 < hl > 标签 和 id JJ displayArea 的 


< div > 标签。 在 这 个 < div > 标签 内 ,有 一 个 < table > 标签 ,我 们 将 在 这 个 表 内 动态 地 添加 表 
格 的 内 容 , 以 显示 排行 榜 。 在 JavaScript 代码 中 ,主要 实现 showRecord O PR, 

在 showRecord O 函数 内 ,主要 进行 的 工作 是 根据 本 地 存储 的 数据 动态 地 构造 一 个 表 
格 ,< table > 标签 。 一 般 情况 下 ,一 个 < table > 标签 元 素 的 组 成 如 图 13. 18 所 示 。 





<table> 
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</table> 





Æ 13.18 < table > 标签 元 素 组 成 


图 13. 18 表示 了 一 个 简单 的 < table > 标签 的 构成 方式 。 可 以 看 到 ,在 < table > 标签 内 ， 
每 增加 一 个 < tr > 标签 对 代表 在 表格 中 增加 了 一 行 。 在 < tr > 标签 内 , 便 可 以 添加 表格 项 了 。 
其 中 < th > 标签 元 素 代表 表格 的 头 部 数据 项 ,具体 到 本 节 的 实例 中 便 是 “排名 “姓名 ”日 期 ” 
和 “分 数 ”。< td > 标签 元 素 代表 的 是 具体 的 每 一 个 表格 数据 ,对 应 到 本 节 实 例 就 是 每 一 条 排 
名 数据 的 排名 、 姓 名 、 日 期 和 分 数 。 

再 看 本 实例 中 的 代码 ,由 于 在 构造 < table > 标签 内 的 内 容 时 需要 重复 一 套 过 程 ,为 了 
便于 编写 代码 ,我 们 将 构造 < table > 标签 内 的 表格 相关 标签 < tr>、< th > 和 < td > 的 相似 过 
程 写 作 函 数 tableItem()。 在 这 个 方法 中 传人 3 个 参数 ,分 别 是 所 要 构造 标签 的 父 级 元 
素 、 所 要 构造 的 标签 名 字 和 具体 在 标签 内 所 要 显示 的 字符 串 , 这 样 在 showRecord() 方 法 
中 便 可 以 很 方便 地 创建 新 的 < tr>、< th > 或 < td > 标签 。 在 showRecord O PR Zt ih , H 7c 3X 
取 了 HTML 页 面 内 的 < table > 元 素 以 及 本 地 存储 中 的 排行 榜 数 据 ,并 将 以 JSON 字符 串 
形式 保存 的 数据 解析 为 JavaScript 对 象 数 组 ,以 便 之 后 使 用 。 接 着 ,通过 tableltem() 方 法 
创建 表格 的 头 部 , 它 由 一 个 < tr >b $£ XJ Wq ik £ 4 个 < th > 元 素 所 组 成 ,用 来 显示 排名 、 姓 
名 \ 日 期 和 分 数 等 表格 头 部 信息 。 接 着 通过 一 个 for 循环 ,来 循环 地 构造 每 一 条 排名 数 
据 , 即 将 之 前 所 获取 的 JavaScript 对 象 数组 内 每 一 个 对 象 的 属性 读 取出 来 并 构造 形成 新 
的 表格 项 标签 。 

由 此 ,通过 这 个 showRecord() 函 数 , 便 可 以 动态 地 构造 一 个 显示 本 地 存储 内 全 部 排名 
信息 的 表格 。 但 是 ,在 完成 表格 构造 后 ,我 们 会 发 现 表 格 内 的 文字 排 布 异常 紧凑 ,十 分 不 美 
观 。 所 以 ,还 需要 在 < table > 标签 内 添加 cellpadding 属性 ,并 设置 为 10。cellpadding 属性 
规定 单元 边沿 与 其 内 容 之 间 的 空白 ,这 样 表 格 内 的 文字 排 布 就 不 会 过 于 紧凑 。 


13.5.3 动态 化 实现 排行 榜 


通过 13.5.1 节 和 13. 5.2 节 中 的 实例 ,分 别 实现 了 分 数 的 录入 和 排行 榜 的 显示 ,在 下 面 
这 个 实例 中 ,将 把 上 述 两 节 中 的 实例 合 二 为 一 ,作为 贪 吃 蛇 游 戏 的 一 个 单独 页 面 ,专门 来 负 
责 显示 和 更 新 排行 榜 信息 。 当 跳 转 到 这 个 页 面 时 ,车 会 话 存储 中 存在 分 数 数据 , 则 进行 分 数 
录入 的 相关 操作 ; 若 会 话 存储 中 没有 数据 , 则 只 显示 分 数 供 玩 家 查看 。 请 看 如 下 实例 ,该 实 
例 在 浏览 器 中 的 运行 效果 如 图 13.19 和 图 13.20 所 示 。 
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j D recordhtml x V 


排行 榜 


排名 kg BH 分 数 
1 空调 2018 年 3 月 31 日 18 时 4 分 。 3200 











2 空调 膛 控 器 ”2018 年 3 月 31 日 18 时 6 分 。 2200 
3 空调 膛 控 器 。 2018 年 3 月 31 日 18 时 3 分 。 2000 
4 吸尘器 2018 年 3 月 31 日 18 时 5 分 。 1800 
5 空调 2018 年 3 月 31 日 18 时 2 分 。 1200 
6 抽 油 烟 机 2018 年 3 月 31 日 18 时 1 分 。 800 


7 滚 简 洗衣 机 2018 年 3 月 31 日 18 时 4 分 。 800 





8 插座 2018 年 3 月 31 日 18 时 7 分 — 700 


9 饮水 机 2018 年 3 月 31 日 15 时 28 分 600 


10 ”加 湿 器 2018 年 3 月 31 日 18 时 5 分 。 500 
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此 网 页 显示 : 


恭喜 您 斩 排名 已 更 新 
m MH 











图 13. 20 存在 新 分 数 时 ,录入 分 数 


文件 名 : record. html 


<! DOCTYPE HTML > 
< html lang = "en- US"> 


<head> 


< meta charset = "UTF - 8"> 
<title></title> 
<style> 


table( 
padding:10px 10px 10px 10px; 
} 


</style> 


</head> 
< body> 


«script» 


var body = document. body; 
var backToGame = document. createElement("button"); 
var txtBacktoGame = document. createTextNode(" 返 回 游戏 "); 
backToGame. appendChild(txtBacktoGame); 
newAttribute(backToGame, "onclick", "goBackToGame( )") ; 
var div = document. createElement("div"); 
newAttribute(div, "id" ,"displayArea"); 
function goBackToGane() ( 
if (sessionStorage["score"])( 
var confirmBox = confirm(" 您 确认 要 放弃 本 次 分 数 吗 ?"); 
if (confirmBox == true)( 
alert(" 已 放弃 分 数 ,返回 游戏 "); 
sessionStorage. removeľItem(" score"); 
location. reload(); 
} 
}else{ 
location. href = "game. html"; 


} 
function bubbleSort(arr)( 
var swapped = true; 
var j= 0; 
var tmp; 
while (swapped)( 
swapped - false; 
j++; 
for (var i=0;i< arr. length- j;i++){ 
if (Number(arr[i].score)« Number(arr[ i + 1]. score) ){ 
tmp = arr[i]; 
arr[i] = arr[i+1]; 
arr[i+1] = tmp; 
swapped = true; 第 
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) 
function currentDate()( 
var date = new Date(); 
var myDate = date.getFullYear() + "年 " + Number(date.getMonth() +1) + "H" + 
date.getDate() + "H" + date.getHours() + "Hj" + date.getMinutes() + "4"; 
return myDate; 
) 
function tableItem(par, tname, str) ( 
var td = document. createElement(tname); 
var txt = document. createTextNode(str); 
td. appendChild(txt); 
par. appendChild(td); 
} 
function newElement(par, name, txt) ( 
var elem = document. createElement(name); 
var text = document. createTextNode(txt); 
elem. appendChild(text); 
par. appendChild(elem); 
) 
function newAttribute(elem, name, val) ( 
var attr = document.createAttribute(name); 
attr.value - val; 
elem. setAttributeNode(attr); 
) 
function saveScore()( 
var myName = document. getElementById("name"). value; 
var myScore = sessionStorage["score"]; 
var date = currentDate(); 
var myRecord = ( 
name:myName, 
Sscore:myScore, 
date:date 
1; 
var rank; 
var scores = localStorage. getItem("scores"); 
if (scores)( 
rank = JSON.parse(scores); 
if (rank.length « 10)( 
rank. push(myRecord) ; 


bubbleSort(rank); 
}else{ 
rank. pop( ) ; 
rank. push(myRecord) ; 
bubbleSort(rank); 
) 
}else{ 


rank = new Array(); 


rank[0] - myRecord; 

) 

var jsonScores - JSON.stringify(rank); 

localStorage. setItem("scores", jsonScores) ; 

sessionStorage. removeItem("score"); 

alert(" 排 名 已 更 新 "); 

location. reload(); 

} 
function showRecord()( 

var scores = localStorage.getItem("scores"); 

if (scores)( 
Scores = JSON.parse(scores); 
newElenment(body, "h1", "排行 榜 "); 
body. appendChild(div); 
var displayArea = document.getElementById("displayArea"); 
var table = document.createElement("table"); 
var trHead = document.createElement("tr"); 
tableIten(trHead, "th", "HE ") ; 
tableIten(trHead, "th", "姓名 "); 
tableItem(trHead, "th"," H Mg"); 
tableIten(trHead, "th", "分 数 "); 
table. appendChild(trHead); 


for (var i= 0;i« scores. length; i++ ){ 
var tr = document.createElement("tr"); 
tableItem(tr,"td",i+1); 
tableItem(tr, "td", scores[ i]. name); 
tableItem(tr, "td", scores[ i]. date); 
tableItem(tr, "td", scores[ i]. score); 
table. appendChild(tr); 

) 

displayArea. appendChild(table); 

body. appendChild(backToGame); 

newAttribute(table, "cellpadding",10); 

}else{ 
newElement(body, "hl"," 暂 无 排名 "); 
body. appendChild(backToGame) ; 


if (sessionStorage["score"])( 
var input = document. createElement(" input"); 
newAttribute( input, "type", "text" ); 
newAttribute( input, "id", "name" ); 
var button = document.createElement("button"); 


newAttribute(button, "onclick", "saveScore()"); 第 
var txt = document. createTextNode(" 提 交 "); 13 
button. appendChild(txt); = 
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newElenent(body, "h2" , "恭喜 您 斩获 高 分 ,请 输入 您 的 姓名 录入 排行 榜 "); 
body. appendChild( input); 
body. appendChild(button); 
body. appendChild(backToGame); 
Jelse( 
showRecord(); 
) 
</script> 
</body> 
</html> 


大 致 地 浏览 代码 不 难 发 现 , 该 实例 的 代码 是 之 前 两 节 实例 代码 的 融合 ,相关 的 函数 不 尽 
相同 。 所 不 同 的 是 ,在 该 实例 的 < body > 标签 内 ,我 们 并 没有 预先 写 好 < hl > 或 是 < table > 标 
签 元 素 。 而 是 通过 JavaScript 根据 需要 动态 添加 相应 的 标签 ,来 实现 录入 分 数 或 是 显示 排 
行 榜 的 功能 。 同 样 ,为 了 便于 编写 代码 ,这 里 分 别 编 写 了 newElement() 和 newAttribute() 
函数 ,来 封装 新 元 素 和 新 属性 的 创建 和 添加 过 程 。newElement( ) 方 法 需要 输入 3 个 参数 ， 
它们 分 别 是 所 要 创建 元 素 的 父 级 元 素 对 象 . 所 要 创建 的 元 素 名 字 以 及 元 素 内 的 文本 信息 。 
newAttribute() 方 法 内 也 需要 传人 3 个 参数 ,分 别 是 所 要 添加 属性 的 标签 元 素 对 象 . 所 要 添 
加 属性 的 名 字 和 相应 的 属性 值 。 

除 此 之 外 ,还 在 页 面 中 添加 了 一 个 "返回 游戏 ?按钮 ,并 对 该 按钮 添加 了 一 个 单 击 事件 处 
PRÉ goBackToGame()。 由 于 该 函数 同时 出 现在 录入 分 数 和 显示 排行 榜 分 数 两 个 不 同 的 
情况 下 ,所 以 可 以 根据 判断 会 话 存储 内 是 否 存在 score 键 值 对 来 进行 不 同 的 处 理 。 当 存在 
新 分 数 且 玩家 仍 想 返 回 游戏 时 ,通过 弹出 对 话 框 询问 玩家 是 否 放弃 分 数 并 返回 游戏 。 当 不 
存在 新 分 数 时 ,玩家 进入 排行 榜 仅 是 为 了 单纯 查询 分 数 , 所 以 直接 进行 跳 转 。 

以 上 便 完 整地 实现 了 贪 吃 蛇 游戏 中 的 排行 榜 页 面 , 兼 有 录入 分 数 和 显示 分 数 这 两 个 功 
能 。 下 面 返回 游戏 页 面 本 身 进 行 一 些 完善 工作 ,让 贪 吃 蛇 游 戏 与 本 节 实 例 得 以 对 接 。 


13.5.4 完善 游戏 页 面 


在 实现 了 排行 榜 页 面 后 ,再 回 过 头 来 看 贪 吃 蛇 游 戏 , 继 续 补充 一 些 工作 后 ,游戏 将 全 部 
制作 完成 。 下 面 来 看 实例 代码 ,其 在 浏览 器 中 的 运行 效果 如 图 13.21 和 图 13.22 所 示 。 
文件 名 : game. html 


<! DOCTYPE HTML > 
<html lang = "en 一 US"> 
<head> 
< meta charset = "UTF — 8"> 
«title»«/title» 
</head> 
<body> 
< canvas id= "snakegame" width = "400px" height = "400px" style = "border:black solid 2px;"> 
</canvas > 
< h2 > 分 数 </h2 > 
<h2 id= "sc"> 0 </h2 > 
< button id= "rank" onclick = "rankPage()"> 排 行 榜 </button > 
< audio src = "eatFruit.mp3" id= "eatFruit"»«/audio» 
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< audio src = "gameOver.mp3" id= "gameOver"»«/audio» 
< script» 
var myCanvas = document. getElementById(" snakegame") ; 
var context 7 myCanvas.getContext("2d"); 
// 为 键盘 按 下 事件 设置 事件 监听 ,并 指定 事件 处 理 函 数 keyPush() 
document. addEventListener("keydown" , keyPush) ; 


// 全 局 变量 


// 控 制 setInterval 
var t; 


// 游 戏 分 数 记录 


var score; 


// 果 实 位 置 
var xFruit; 
var yFruit; 


// 蛇 

var trail; 

var xHead; 

var yHead; 

var snakeLen; 

// 蛇 在 xy 两 个 方向 的 移动 速度 
var vx; 

var vy; 


// 方 向 键 键盘 码 
var left = 37; 
var up = 38; 

var right - 39; 
var down = 40; 


// 键 盘 事件 的 事件 处 理 函 数 ,通过 方向 键 实现 方向 的 转变 
function keyPush( e) ( 
switch(e. keyCode) ( 
case left: 
if(vx!- 1&& vy != O)( 
vx= -1;vy= 0; 
) 
break; 
case up: 
if(vx != 0 && vy != 1)( 
vx=0;vy= -1; 


) 


break; 
case right: 
if (vx != -1 && vy != O)( 
vx =1;vy= 0; 


) 


break; 


case down: 
if (vx != O && vy != - 1)( 
vx=0;vy=1; 
} 
break; 
} 
} 
// 填 充 单个 网 格 (xv y) 


function paintCell(x, y)( 


context.fillRect((x- 1) * 20 * 1, (y- 1) * 20 * 1,18,18); 


) 


// 以 红色 绘制 果实 

function paintFruit()( 
context.fillStyle - "red"; 
paintCell(xFruit, yFruit); 

} 


// 随 机 设 定 果实 位 置 
function randomFruit(){ 


xFruit = Math.floor((Math.random() * 1000)) $20 + 1; 
yFruit = Math. floor( (Math. random() *1000)) $20 + 1; 


paintFruit(); 
) 


// 以 绿色 绘制 贪 吃 蛇 
function paintSnake()( 
context.fillStyle - "lime"; 
for (var i20; i«trail.length;i**)( 
paintCell(trail[i].x, trail[i].y); 
) 
) 


// 初 始 化 蛇 
function initSnake(){ 
// 初 始 化 游戏 分 数 
score = 0; 
trail = []; 
xHead - 10; 
yHead - 10; 
vx = 1; 
vy = 0; 
snakeLen = 3; 
for (var i= 0;i« snakeLen;i++){ 
trail. push((x:xHead + i- 2, y:yHead]) ; 
) 
randonFruit(); // 初 始 化 时 ,添加 果实 
paintSnake(); 
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// 清 空 画 布 
function refreshCanvas()( 


context. clearRect(0, 0, myCanvas. width, myCanvas. height); 
) 


// 移 动 蛇 
function moveSnake()( 
// 蛇 下 一 时 刻 的 头 部 坐标 
xHead = (vx+xHead+19)%20+1; 
yHead = (vy+yHead+19)%20+1; 
// 在 蛇 移 动 之 后 检查 是 否 吃 到 自己 
selfEat(); 
// 将 新 的 头 部 坐标 添加 入 trail 
trail. push( {x:xHead, y: yHead} ) ; 
// 将 尾部 的 坐标 移 除数 组 
while (trail. length > snakeLen)( 
trail.shift(); 
} 
// 判 断 是 否 吃 到 果实 
eatFruit(); 
// 清 空 画布 
refreshCanvas(); 
// 重 新 绘制 蛇 
paintSnake(); 
// 重 新 绘制 果实 
paintFruit(); 
) 


// 判 断 贪 吃 蛇 是 否 吃 了 果实 
function eatFruit()( 
if (xHead == xFruit && yHead == yFruit)( 
fruitEatingSound(); 
Score += 100; 
var s = document. getElementById("sc"); 
s. innerText = score; 
randomFruit(); 
snakeGrow(); 
) 
) 
// 蛇 在 吃 果实 之 后 变 长 
function snakeGrow()( 
snakeLen**; 
xHead = (vx-* xHead + 19) $20 * 1; 
yHead = (vy+ yHead+ 19) $20 * 1; 
trail. push( (x: xHead, y: yHead] ) ; 
) 
// 蛇 在 吃 到 自己 之 后 游戏 结束 
function selfEat(){ 
for (var i=0;i< trail. length; i++ ){ 
if (xHead == trail[i].x && yHead == trail[i].y)( 


gameOverSound() ; 
endGane() ; 


) 
function bubbleSort(arr)( 
var swapped - true; 
var j= 0; 
var tmp; 
while (swapped)( 
swapped - false; 
j++; 
for (var i= 0;i< arr. length- j;i++){ 
if (arr[i]>arr[i+1]){ 
tmp = arr[i]; 
arr[i] = arr[i+1]; 
arr[i+1] = tmp; 


swapped true; 


} 
function endGame()( 
clearInterval(t); 
setTimeout(function()( 
alert("Good Game") ; 


var scores = localStorage.getlItem("scores"); 
if (scores)( 
var rank - JSON.parse(scores); 
if (rank. length == 10){ 
if (score « Number(rank[9]. score) )( 
location. reload(); 
}else{ 
sessionStorage["score"] = score; 
document. getElementById("rank"). click(); 
} 
}else{ 
sessionStorage["score"] = score; 
document. getElementById("rank").click(); 
} 
}else{ 
sessionStorage["score"] = score; 
document. getElementById("rank").click(); 
} 
}, 200); 


function fruitEatingSound()( 
var fruitSound = document. getElementById("eatFruit"); 
fruitSound.currentTime - 0; 


fruitSound. play(); 第 
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var endGameSound = document.getElementById("gameOver"); 
endGameSound.currentTime - 0; 
endGameSound. play() ; 
) 
function rankPage()( 
if (sessionStorage["score"])( 
location. href = "record. html"; 


Jeise( 
var c = confirm(" 查 看 排行 榜 将 放弃 本 次 游戏 ") ; 
if (c == true)( 


location.href = "record. html"; 
) 
) 


mke E SN 100 毫秒 调用 moveSnake 进行 蛇 的 移动 
initSnake(); 
t = setInterval(moveSnake, 100) ; 
</script> 
</body> 
</html> 
在 该 实例 代码 中 ,为 了 能 够 为 每 一 次 游戏 进行 分 数 记录 ,我 们 引入 了 一 个 全 局 变量 
score。 在 这 里 约定 计 分 方式 为 ,从 零 开 始 且 每 吃 到 一 次 果实 分 数 加 100 分 。 为 了 实现 这 一 
功能 , 仅 需 在 原来 的 eatFruit() 函 数 中 进行 修改 , 即 在 该 函数 内 增加 全 局 变量 score 的 自 增 
运算 。 除 此 之 外 ,为 了 能 够 实时 地 向 玩家 显示 当前 所 获取 的 分 数 ,还 需 在 HTML 页 面 中 添 
加 二 级 标题 元 素 < h2 > 标签 ,并 在 eatFruit() 函 数 的 score 变量 的 自 增 之 后 ,将 新 的 分 数 显示 
到 相应 的 < h2 > 标签 当中 。 
除 此 之 外 ,还 需 完成 的 逻辑 是 在 游戏 结束 后 ,判断 玩家 所 获取 的 分 数 是 否 能 够 进入 排行 
榜 。 为 了 实现 这 一 逻辑 ,需要 在 endGame() 函 数 中 添加 一 些 代 码 。 首 先 , 需 要 读 取 本 地 存 
储 的 排行 榜 数据 ,如 果 本 地 存储 数据 不 存在 , 则 说 明 这 是 首次 游戏 ,并 不 存在 分 数 记 录 ,直接 
将 当前 成 绩 写 入 会话 存储 score 键 值 对 。 如 果 本 地 存储 存在 ,那么 需要 将 其 由 JSON 字符 
串 解 析 为 JavaScript 对 象 数组 。 由 于 在 分 数 记 录 的 过 程 中 ,该 JavaScript 对 象 数 组 都 会 经 
历 排序 的 过 程 ,所 以 该 对 象 数组 的 第 10 个 元 素 代表 着 排行 榜 的 最 低 分 , 故 只 需 获 取 对 象 数 
组 中 索引 为 9 的 元 素 即 可 。 如 果 排 行 榜 内 的 数据 对 象 还 不 足 10 个 ,那么 当前 成 绩 可 以 直接 
写 人 会 话 存储 的 score 键 值 对 并 录入 排行 榜 。 如 果 这 个 元 素 存在 , 则 需要 将 所 获取 元 素 的 
score 属性 与 当前 游戏 的 分 数 进行 比较 ,如 果 当 前 游戏 分 数 小 于 排行 榜 内 最 低 分 , 则 直接 进 
行 重新 载 入 页面 操作 ,作为 新 一 轮 游戏 开始 。 如 果 当 前 游戏 分 数 可 以 进入 排行 榜 , 则 将 当前 
游戏 分 数 以 score 键 值 对 的 形式 存储 到 会 话 存储 中 。 
上 述 两 节 的 实例 game. html 和 record. html 组 成 了 贪 吃 蛇 游 戏 的 最 终 代码 ,由 此 便 完 
成 了 一 个 简单 的 贪 吃 蛇 游 戏 的 制作 。 


13.6 J 题 


通过 阅读 和 编写 本 章 的 贪 吃 蛇 游戏 实例 ,相信 读者 对 于 HTMLS 的 相关 知识 有 了 更 为 
全 面 和 清晰 的 认识 。 当 然 本 章节 的 实例 代码 并 不 是 完美 的 ,其 中 有 一 些 问 题 值得 读者 进 一 


步 思考 。 

1. 贪 吃 蛇 实例 的 最 终 运 行 效果 是 否 界面 友好 。 如 果 不 够 友好 ,请 读者 利用 CSS 相关 知 
识 来 对 其 进行 丰富 和 美化 。 

2. 在 游戏 的 数据 输入 环节 是 否 有 不 妥 之 处 ? 是 否 在 一 些 地 方 缺少 了 输入 数据 的 验证 ? 
如 果 有 ,请 指出 并 进行 改正 。 

3. 在 当前 的 贪 吃 蛇 游戏 规则 中 ,地 图 不 存在 边界 ,车 蛇 的 头 达到 边界 ,那么 下 一 刻 蛇 的 
头 将 从 另 一 边 的 边界 出 现 。 请 读者 改变 实例 代码 ,使 蛇 不 能 达到 边界 ,如 若 蛇 头 到 达 边 界 ， 
则 游戏 结束 。 

4. 通过 之 前 的 学 习 , 我 们 知道 ,开发 者 可 以 利用 调试 界面 来 进行 Web Storage 的 添加 
和 删除 ,如 编写 和 测试 13. 5. 1 节 中 实例 的 过 程 。 既 然 如 此 ,玩家 也 可 以 通过 调试 界面 作 浆 ， 
并 直接 在 会 话 存储 中 添加 score 键 值 对 来 获取 更 高 的 分 数 , 而 不 是 玩 游戏 。 请 读者 思考 ,我 
们 能 够 通过 何 种 方式 来 防止 玩家 利用 调试 界面 进行 作 浆 ,并 进一步 完善 这 个 贪 吃 蛇 游 戏 。 

5. 相信 很 多 读者 在 测试 运行 游戏 的 过 程 中 会 发 现 这 样 的 问题 ， 当 快速 进行 方向 键 的 
切换 时 ,会 莫名 奇妙 地 出 现 游 戏 结束 的 情况 。 尽 管 在 代码 中 我 们 限制 了 贪 吃 蛇 反 向 的 移动 ， 
但 还 是 会 出 现 这 样 的 情况 ,请问 这 是 为 什么 。 请 读者 进行 反复 调试 ,寻找 其 中 的 问题 所 在 ， 
并 修复 这 个 bug。 

6. 在 13.5 节 中 ,我 们 编写 了 如 createElement() .newAttribute() 和 tableltem() 这 样 的 
函数 。 类 似 地 ,在 之 前 的 实例 中 ,我们 还 需要 反复 地 调用 如 getElementById() 这 样 元 长 的 
方法 ,是 否 有 什么 其 他 简单 方法 。 请 读者 自行 搜索 并 学 习 诸如 JQuery 这 样 的 JavaScript 
J£ , 试 着 利用 开源 的 JavaScript 函数 库 来 简化 本 章 中 的 实例 代码 。 

7. fE 13.5 节 中 ,通过 Web Storage 来 实现 了 贪 吃 蛇 游戏 的 分 数 记录 。 在 9. 2 节 中 还 
介绍 了 本 地 数据 库 IndexedDB 的 相关 知识 。 请 读者 试 着 利用 IndexedDB 编写 贪 吃 蛇 排 行 
榜 页 面 的 相关 过 程 。 

8. 如 果 读 者 完成 了 第 7 题 中 以 IndexedDB 实现 排行 榜 页 面 的 思考 任务 ,那么 将 会 对 异 
步 操作 和 回调 函数 有 直接 的 认识 ,会 发 现 编写 异步 操作 代码 的 烦琐 之 处 。 请 读者 试 着 利用 
12. 10 节 Promise 对 象 的 相关 知识 ,来 封装 调用 IndexedDB 相关 方法 的 逻辑 ,实现 对 异步 操 
作 相关 代码 的 简化 。 
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